5.3.1 绑定<html>中class的方式_Vue.js从入门到项目实践（超值版）-QQ阅读女生青春网

下面介绍绑定<html>中class的几种方式。Vue.js对其进行了修改，将以前使用的复杂性转变成简单、好学、易掌握。

对象语法：可以传给v-bind:class一个对象，以动态地切换class。注意，v-bind:class指令可以与普通的class特性共存。

语法格式如下：

    v-bind:class="{'className1':boolean1,'className2':boolean2}"

示例代码如下：

运行效果如图5-13所示。

图5-13　绑定<html>中class的对象语法效果

提示：当单击颜色区域时，触发changeColor方法。数据的值发生变化时，class行间属性会被切换，如图5-13所示。

当看到v-bind:class="{'class1':yellow,'class2':red}"这句代码是不是就想到了直接使用一个对象替代这个键值对的写法，这当然也是可以的。代码如下：

虽然上述两种写法不同，但是达到的效果是相同的。这两种写法中，前一种是空间复杂度大一点，后一种是时间复杂度大一点，可以根据具体需求进行应用。

数组语法：可以把一个数组传给v-bind:class，以应用一个class列表。

语法格式如下：

    v-bind:Class="[Class1,Class2]"

示例代码如下：

运行效果如图5-14所示。

图5-14　绑定<html>中class的数组语法效果

下面讲解<html>中class绑定在组件上的使用。

代码如下：

运行效果如图5-15所示。

图5-15　在组件上的使用运行效果

这种用法仅适用于自定义组件的最外层是一个根元素的情况，否则会无效。当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的props来传递。