- Vue.js从入门到项目实践（超值版）
- 聚慕课教育研发中心编著
- 490字
- 2022-07-29 14:27:48
5.3.1 绑定<html>中class的方式
下面介绍绑定<html>中class的几种方式。Vue.js对其进行了修改，将以前使用的复杂性转变成简单、好学、易掌握。
1．对象语法
对象语法：可以传给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}"这句代码是不是就想到了直接使用一个对象替代这个键值对的写法，这当然也是可以的。代码如下：
虽然上述两种写法不同，但是达到的效果是相同的。这两种写法中，前一种是空间复杂度大一点，后一种是时间复杂度大一点，可以根据具体需求进行应用。
2．数组语法
数组语法：可以把一个数组传给v-bind:class，以应用一个class列表。
语法格式如下：
v-bind:Class="[Class1,Class2]"
示例代码如下：
运行效果如图5-14所示。
图5-14 绑定<html>中class的数组语法效果
3．在组件上的使用
下面讲解<html>中class绑定在组件上的使用。
代码如下：
运行效果如图5-15所示。
图5-15 在组件上的使用运行效果
这种用法仅适用于自定义组件的最外层是一个根元素的情况，否则会无效。当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的props来传递。