- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 490字
- 2022-07-29 14:27:47
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來傳遞。