vue動態樣式綁定class

(1). 不好的方法: 將整個class字符串，看做一個普通的字符串屬性綁定.

<元素 :class="變量">

data:{

變量: "class1 class2 ..."

}

缺點: 極其不便于修改其中某一個class

(2). 好的方法: 將class看做一個對象來綁定。

a. <元素 :class="{ class1: 變量1, class2: 變量2, ... }"

data:{

變量1: true或false,

變量2: true或false,

... : ...

}

說明:對于網站建設公司來講，當一個class對應的變量值是true，則這個class會出現在編譯后的元素上，起作用；當一個class對應的變量值為false，則這個class不會出現在編譯后的元素上，不起作用！

b. 優點: 極其便于修改其中某一個class

c. 示例: 驗證手機號

2_class.html

d. 問題: 如果多個元素都需要用同一個class，但是啟用和禁用的狀態各不相同，如果將變量直接保存在data中，極容易發生沖突

(3). 更好的方法: 將一個元素的多個class包裹在一個對象變量中:

a. <元素1 :class=變量1">

<元素2 :class=變量2">

data:{

變量1:{

class名: true或false,

... : ...

},

變量2:{

class名: true或false,

... : ...

}

}

b. 優點: 即使多個元素，共用同一個class，也不會發生沖突！

c. 示例: 驗證手機號和身份證號

2_class3.html

(4). 問題: 如果元素上有些class是固定不變的，而有些class是可能發生變化的？

(5). 解決: 其實在一個元素上寫死的固定不變的class和動態變化的:對于網站建設公司來講class是可以并存的。最后運行的結果是，:class動態生成的class字符串會和class中固定不變的class字符串合并為最終應用到元素上的class屬性。