1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。

2、先来看一个简单的页面样式内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue样式</title>

    <script type="text/javascript" src="js/vue.min.js"></script>

    <style type="text/css">

        .red{

            color: red;

        }

        .thin{

            font-weight: bold;

        }

        .size{

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div id="app">

        <p class="red size">这是Vue样式示例</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{},

            methods:{}

        })

    </script>

</body>

</html>

里面简单的定义了三个样式类：red、thin、size；接下来我们通过v-bind实现同样的效果。

<p v-bind:class="redStr">这是Vue样式示例</p>

p标签里我们添加v-bind指令，class里的样式内容为Vue对象里data属性定义的“redStr”值。

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                redStr:'red size'

            },

            methods:{}

        })

    </script>

data里redStr的值为“red size”，所以运行效果是一样的。

3、看下个例子：

<body>

    <div id="app">

        <p v-bind:class="['red',flag?'size':'']">这是Vue样式示例</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{
　　　　　　　　　flag:true　
　　　　　　　},

            methods:{}

        })

    </script>

</body>

这里我感觉虽然用了v-bind指令，但是其没有从data里取数据，其直接把样式定义成了一个固定字符串数组，通过数组内容取对应的样式。其有一个特点就是可以读取三元表达式，根据三元表达式来控制样式是否进行展示。而且我们还可以对这个三元表达式进行简化，用对象的方式来达到同样的效果。代码如下：

<p v-bind:class="['red',{'size':flag}]">这是Vue样式示例</p>

4、下个例子：

<body>

    <div id="app">

        <p v-bind:class="classObj">这是Vue样式示例</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                classObj:{'size':true,'red':true,'thin':true}

            },

            methods:{}

        })

    </script>

</body>

这里通过属性绑定了data对象数据classObj，其值为一个对象，通过true或者false来决定是否应用该样式，这样的代码比较简洁而且灵活度比较高。

5、以上几种方式都可以用来定义class样式，具体使用哪一种可以根据具体需求场景来应用。

每天进步一点点！

Vue学习之路第十一篇：为页面元素设置class类样式的更多相关文章

  1. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  2. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  3. Vue学习之路第七篇：跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  4. vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  5. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  6. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  7. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  8. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  9. Vue学习之路第五篇：v-bind

    v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...

随机推荐

  1. 转载 - AC自动机算法

    出处:http://blog.csdn.net/niushuai666/article/details/7002823 AC自动机简介:  首先简要介绍一下AC自动机:Aho-Corasick aut ...

  2. 【ACM】hdu_1106_排序_201308071928

    排序Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissio ...

  3. java SE与java EE , java ME之间的关系

    question: Which one should I install when I want to start learning Java? I'm going to start with som ...

  4. requireJS文件夹

    前言 对于像我这样的requireJS刚開始学习的人而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是略微理清了这个文件夹问题吧. requireJS学习网址:requ ...

  5. 【cl】工程导入

    File>Open 导入成功

  6. 压缩&amp;&amp;解压命令汇总

    下面是搜集的Linux系统下,压缩&&解压命令,以备參考使用.     .tar   解包: tar xvf FileName.tar   打包:tar cvf FileName.ta ...

  7. PHP反射类的理解（代码篇）

    <?php/** * Created by PhpStorm. * User: * Date: 2017/6/12 * Time: 14:34 * 关于反射类的理解 */class Person ...

  8. C++静态变量本身可否是一个实例对象

    一般书上总是用int来举例,那个太简单.如果静态变量本身可否是一个实例对象呢?应该是可以,但是这样涉及到它的构造函数以及它内部的静态变量如何初始化两个问题,换而言之,这个静态变量本身应该如何初始化?这 ...

  9. c21---结构体

    // // main.c // 结构体基本概念 // #include <stdio.h> int main(int argc, const char * argv[]) { /* 基本数 ...

  10. 0x56 状压DP

    gan这两题怎么差不多 #include<cstdio> #include<iostream> #include<cstring> #include<cstd ...