>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、本节说明 在上一节中,我们讲了如何使用v-bind对象语法的方式绑定class属性,并实现了样式的切换。这一节我们来学习v-bind绑定class属性的另外一种语法-数组语法。这种数组语法在实际应用中并不如对象语法常见,其用法容易理解,但书写相对繁琐。 1. 数组语法绑定class类 ```html <div :class="['css类名1','css类名2']">数组语法</div> ``` 2. 数组中嵌套对象 ```html <div :class="['css类名1', 'css类名2', {css类名3: true|false}]"> 数组中嵌套对象</div> ``` * 注意对象里面的css类名不用加单引号,和上一节用法是一致的 ## 二、 怎么做 我们利用数组语法,实现一个和上一节对象语法一样的需求:为文字增加颜色,并点击按钮实现颜色的切换。首先我们定义css类 ![](https://img.kancloud.cn/67/0f/670f24ab594011485c55efc9ca6c41a0_287x335.png) 下面是具体的实现 ![](https://img.kancloud.cn/9f/44/9f449612dfec9577ce8a93eca8007395_934x779.png) * 我们默认的定义了一个带有css类名的数组`['bold','blue']`,默认是粗体蓝色 * 使用pop()和push方法操作数组,pop是把数组最后一个元素移除,push是在数组尾部加入一个元素 ## 三、 效果 ![](https://img.kancloud.cn/4d/ba/4dba5420ee970931aa1f12b358e691ff_254x84.gif) 为文字增加颜色,并点击按钮实现颜色的切换(这里是浏览器截图,点击无效) ## 四、 深入:哪些数组操作是响应式的? 在上文中,我们使用数组的pop()和push()方法去操作数组元素,而不是使用`this.cssArray[1] = 'blue'`直接操作数组。因为这种**通过下标操作数组的方式不是响应式的,也就是说虽然数组元素的值会发生变化,但不会导致页面颜色发生切换**。 所以,当我们希望通过操作数据影响页面显示内容及显示效果的时候,要使用数组相关的函数,不能直接使用数组下表操作数据。下面列举一下经常用到的响应式的数组操作函数: * push(param…) 加入元素到数组的尾部 * pop() 从数组的尾部弹出一个元素 * shift() 从数组的头部移除一个元素 * unshift(param…) 加入元素到数组的头部 * splice() 可以实现指定下标的数组元素的删除、插入、替换 * sort() 数组排序 * reverse() 数组倒序排序 如果你对这些方法还不是很熟,有必要去复习一下这些js的基础知识。