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

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

• Class綁定
• Style綁定

綁定Class

對象語法

data 里的屬性是負責(zé) 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>

數(shù)組語法

data 里負責(zé)定義 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，即數(shù)組語法里寫對象語法。所以 data 里的數(shù)據(jù)主要用于：

1. 是否需要某個 class
2. 定義 "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>

數(shù)組語法

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

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

這里在 data 里用 styleObject 定義了 color 和 font-size，再用 overridingStyles 定義了 background 和 margin。然后在組件里用數(shù)組進行混合綁定。

data: {
 styleObject: {
  color: 'red',
  fontSize: '13px'
 },
 overridingStyles: {
  background: 'green',
  margin: '13px'
 }
}

渲染為

<div style="color: red; font-size: 13px; background: green; margin: 13px;"></div>

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。