>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、本節說明 在上一節中，我們講了如何使用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的基礎知識。