网赌电子游戏爆分规律

下面介紹綁定<html>中class的幾種方式。Vue.js對其進行了修改，將以前使用的復雜性轉變成簡單、好學、易掌握。

對象語法：可以傳給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}"這句代碼是不是就想到了直接使用一個對象替代這個鍵值對的寫法，這當然也是可以的。代碼如下：

雖然上述兩種寫法不同，但是達到的效果是相同的。這兩種寫法中，前一種是空間復雜度大一點，后一種是時間復雜度大一點，可以根據具體需求進行應用。

數組語法：可以把一個數組傳給v-bind:class，以應用一個class列表。

語法格式如下：

    v-bind:Class="[Class1,Class2]"

示例代碼如下：

運行效果如圖5-14所示。

圖5-14　綁定<html>中class的數組語法效果

下面講解<html>中class綁定在組件上的使用。

代碼如下：

運行效果如圖5-15所示。

圖5-15　在組件上的使用運行效果

這種用法僅適用于自定義組件的最外層是一個根元素的情況，否則會無效。當不滿足這種條件或需要給具體的子元素設置類名時，應當使用組件的props來傳遞。

官术网_书友最值得收藏!