>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、本節說明 v-bind綁定元素除了上一節那種直接進行單個屬性值綁定，還可以傳入對象和數組。如：本節我們講解使用對象語法的方式對class屬性進行綁定。 * 我們先來看看，傳統的html的css類引用語法 ``` <h2 class="css類名1 css類名2">html傳統寫法</h2> ``` * v-bind對象語法，我們需要隊css-class類名賦一個boolean值，來決定css類是否生效。 ``` <h2 v-bind:class="{css類名1: true|false, css類名2: true|false}">{{message}}</h2> ``` 初次看這種寫法，實在是繁瑣，沒有我們直接在html標簽上寫class更加簡單。但是`v-bind:class`語法的好處就在于，我們可以動態的改變布爾值，來切換樣式。 * **問題：我們使用了v-bind:class,那么class屬性還能不能用了？** 答：可以，完全不耽誤，vue會幫你將二者合并 ``` <h2 v-bind:class="{css類名1: true|false, css類名2: true|false}" class="css類名3">{{message}}</h2> ``` 我們利用上面的語法，實現一個簡單的需求：為文字增加顏色，并點擊按鈕實現顏色的切換。 ## 二、 怎么做 首先，定義兩個css的類，blue和red是兩個css的類名 ```css .blue { color: blue; } .red { color: red; } ``` 然后我們來實現視圖模型，`isBlue=true`表示默認設置文字的顏色是藍色的  有的時候我們會覺得在雙引號里面去寫css類有點怪異，并且IDE無提示。css類比較多的情況下，我們也可以把屬性值對象綁定，通過自定義函數來返回  ## 三、 效果 上面兩種方式，實現的效果是一樣的，藍色的文字  ## 四、 深入 那我們如何動態的切換顏色呢，這就需要我們自定義方法啦 * 視圖代碼，`@click`是`v-on:click`的簡寫形式，changeColor是我們自定義的切換顏色的方法 ``` <button @click="changeColor">換顏色</button> ``` * 視圖模型（app），在methods代碼段加入自定義函數changeColor ``` changeColor(){ this.isBlue = !this.isBlue this.isRed = !this.isRed } ``` 最終效果