3.6　绑定HTML样式（class）

在Vue.js 3.x中，动态的样式类在v-on:class中定义，静态的类名写在class样式中。

3.6.1　数组语法

Vue中提供了使用数组绑定样式，可以直接在数组中写上样式的类名。

【例3.10】　class数组语法（源代码\ch03\3.10.html）。

在Chrome浏览器中运行程序，打开控制台，可以看到渲染的样式，如图3-12所示。

图3-12　数组语法渲染结果

如果想要以变量的方式定义样式，就需要先定义这个变量。示例中的样式与上例样式相同。

在数组语法中，还可以使用对象语法，根据值的真假来控制样式是否使用。

在Chrome浏览器中运行程序，渲染结果和上面的示例相同（见图3-12）。

3.6.2　对象语法

前面提到过，在数组中可以使用对象的形式来设置样式，在Vue中也可以直接使用对象的形式来设置样式。对象的属性为样式的类名，value则为true或者false，当值为true时显示样式。由于对象的属性可以带引号，也可以不带引号，所以属性就按照自己的习惯写法就可以了。

【例3.11】　Class对象语法（源代码\ch03\3.11.html）。

在Chrome浏览器中运行程序，打开控制台，可以看到渲染的结果，如图3-13所示。

当class1或class2变化时，class列表将相应地更新。例如，class2的值变更为false，代码如下。

【例3.12】　class2的值变更为false（源代码\ch03\3.12.html）。

在Chrome浏览器中运行程序，打开控制台，可以看到渲染的结果，如图3-14所示。

图3-13　Class对象语法

图3-14　渲染结果

当对象中的属性过多时，如果还是全部写到元素上，势必会显得比较烦琐。这时可以在元素上只写对象变量，在Vue.js实例中进行定义。

【例3.13】　在元素上只写对象变量（源代码\ch03\3.13.html）。

在Chrome浏览器中运行程序，渲染的结果如图3-15所示。

图3-15　对象语法效果

也可以绑定一个返回对象的计算属性，这是一个常用且强大的模式，示例代码如下：

在Chrome浏览器中运行程序，渲染的结果和上面示例相同（见图3-15）。

3.6.3　在组件上使用class属性

当在一个自定义组件上使用class属性时，这些类将被添加到该组件的根元素上，这个元素上已经存在的类不会被覆盖。

例如，声明组件my-component如下：

     Vue.component('my-component', {
        template: '<p class="class1 class2">Hello</p>'
     })

然后在使用它的时候添加一些class样式style3和style4：

     <my-component class=" class3 class4"></my-component>

HTML将被渲染为：

     <p class=" class1 class2 class3 class4">Hello</p>

对于带数据绑定的class也同样适用：

     <my-component v-bind:class="{ class5: isActive }"></my-component>

当isActive为Truthy时，HTML将被渲染为：

     <p class=" class1 class2 class5">Hello</p>