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

操作元素的class列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求，因?yàn)樗鼈兌际菍傩?，所以可用v-bind處理，通過(guò)表達(dá)式計(jì)算出字符串結(jié)果即可。不過(guò)字符串拼接麻煩且易錯(cuò)。因此，在將v-bind用于class和style時(shí)，Vue做了專(zhuān)門(mén)增強(qiáng)，表達(dá)式結(jié)果類(lèi)型除了字符串之外，還可是對(duì)象或數(shù)組。

• Class綁定
• Style綁定

綁定Class

對(duì)象語(yǔ)法

data 里的屬性是負(fù)責(zé) toggle 是否要這個(gè) class，也就是一般定義 Boolean 類(lèi)型的值。

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

這里用 isActive 和 hasError 定義是否需要 active 和 text-danger 類(lèi)。

data: {
 isActive: true,
 hasError: false
}

渲染為

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

數(shù)組語(yǔ)法

data 里負(fù)責(zé)定義 CSS 類(lèi)名。

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

這里定義了 activeClass 和 errorClass 的 CSS 類(lèi)名是 active 和 text-danger。

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

渲染為

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

混合寫(xiě)法

可以用混合的形式來(lái)綁定 class，即數(shù)組語(yǔ)法里寫(xiě)對(duì)象語(yǔ)法。所以 data 里的數(shù)據(jù)主要用于：

1. 是否需要某個(gè) class
2. 定義 "class" 里面的類(lèi)名

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

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

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

渲染為

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

綁定Style

對(duì)象語(yǔ)法

data 里的屬性是定義 style 里的值。與 class 不一樣，class 是定義是否要這個(gè) 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ù)組語(yǔ)法

可以綁定多個(gè)樣式對(duì)象到 style 上

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

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

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

渲染為

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

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

最新評(píng)論