學習 Vue 的時候覺得樣式綁定很簡單，但是使用的時候總是容易搞暈自己。因為 :class 和 :style 里的數組語法和對象語法和 data 里綁定的值是不太一樣的。這篇文章就簡單對 Vue 綁定做個總結。

操作元素的class列表和內聯樣式是數據綁定的一個常見需求，因為它們都是屬性，所以可用v-bind處理，通過表達式計算出字符串結果即可。不過字符串拼接麻煩且易錯。因此，在將v-bind用于class和style時，Vue做了專門增強，表達式結果類型除了字符串之外，還可是對象或數組。

綁定Class

對象語法

data 里的屬性是負責 toggle 是否要這個 class，也就是一般定義 Boolean 類型的值。

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

這里用 isActive 和 hasError 定義是否需要 active 和 text-danger 類。

data: { isActive: true, hasError: false}

渲染為

<div class="active"></div>

數組語法

data 里負責定義 CSS 類名。

<div :class="[activeClass, errorClass]"></div>

這里定義了 activeClass 和 errorClass 的 CSS 類名是 active 和 text-danger。

data: { activeClass: 'active', errorClass: 'text-danger'}

渲染為

<div class="active text-danger"></div>

混合寫法

可以用混合的形式來綁定 class，即數組語法里寫對象語法。所以 data 里的數據主要用于：

是否需要某個 class 定義 "class" 里面的類名

<div :class="[{ active: isActive }, errorClass]"></div>

這里定義了 errorClass 的 CSS 類名為 text-danger，并用 isActive 定義是否需要 active 類。

data: { errorClass: 'text-danger', isActive: true}

渲染為

<div class="active text-danger"></div>

綁定Style

對象語法

data 里的屬性是定義 style 里的值。與 class 不一樣，class 是定義是否要這個 class的。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

這里定義了 style 里的 color 和 font-size 的值。

data: { activeColor: 'red', fontSize: 30}

渲染為

<div style="color: red; font-size: 30px"></div>

數組語法

可以綁定多個樣式對象到 style 上

<div :style="[baseStyles, overridingStyles]"></div>