>本节讲解的内容对前面的章节具有依赖性，如果看起来有困难，请先看本系列前面的章节 ## 一、本节说明 在上一节中，我们讲了如何使用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类  下面是具体的实现  * 我们默认的定义了一个带有css类名的数组`['bold','blue']`，默认是粗体蓝色 * 使用pop()和push方法操作数组，pop是把数组最后一个元素移除，push是在数组尾部加入一个元素 ## 三、 效果  为文字增加颜色，并点击按钮实现颜色的切换（这里是浏览器截图，点击无效） ## 四、 深入：哪些数组操作是响应式的？ 在上文中，我们使用数组的pop()和push()方法去操作数组元素，而不是使用`this.cssArray[1] = 'blue'`直接操作数组。因为这种**通过下标操作数组的方式不是响应式的，也就是说虽然数组元素的值会发生变化，但不会导致页面颜色发生切换**。 所以，当我们希望通过操作数据影响页面显示内容及显示效果的时候，要使用数组相关的函数，不能直接使用数组下标操作数据。下面列举一下经常用到的响应式的数组操作函数： * push(param…) 加入元素到数组的尾部 * pop() 从数组的尾部弹出一个元素 * shift() 从数组的头部移除一个元素 * unshift(param…) 加入元素到数组的头部 * splice() 可以实现指定下标的数组元素的删除、插入、替换 * sort() 数组排序 * reverse() 数组倒序排序 如果你对这些方法还不是很熟，有必要去复习一下这些js的基础知识。