數據綁定的一個常見需求場景是操縱元素的 CSS class 列表和(hé)内聯樣式。因爲 class 和(hé) style 都是 attribute，我們可以和(hé)其他(tā) attribute 一樣使用(yòng) v-bind 将它們和(hé)動态的字符串綁定。但(dàn)是，在處理(lǐ)比較複雜(zá)的綁定時(shí)，通過拼接生成字符串是麻煩且易出錯的。因此，Vue 專門(mén)爲 class 和(hé) style 的 v-bind 用(yòng)法提供了(le)特殊的功能(néng)增強。除了(le)字符串外(wài)，表達式的值也(yě)可以是對(duì)象或數組。
綁定 HTML class
綁定對(duì)象
我們可以給 :class (v-bind:class 的縮寫) 傳遞一個對(duì)象來(lái)動态切換 class：
template
<div :class="{ active: isActive }"></div>
上(shàng)面的語法表示 active 是否存在取決于數據屬性 isActive 的真假值。
你(nǐ)可以在對(duì)象中寫多個字段來(lái)操作(zuò)多個 class。此外(wài)，:class 指令也(yě)可以和(hé)一般的 class attribute 共存。舉例來(lái)說，下(xià)面這(zhè)樣的狀态：
js
data() {
return {
isActive: true,
hasError: false
}
}
配合以下(xià)模闆：
template
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
渲染的結果會(huì)是：
template
<div class="static active"></div>
當 isActive 或者 hasError 改變時(shí)，class 列表會(huì)随之更新。舉例來(lái)說，如果 hasError 變爲 true，class 列表也(yě)會(huì)變成 "static active text-danger"。
綁定的對(duì)象并不一定需要寫成内聯字面量的形式，也(yě)可以直接綁定一個對(duì)象：
js
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
template
<div :class="classObject"></div>
這(zhè)也(yě)會(huì)渲染出相同的結果。我們也(yě)可以綁定一個返回對(duì)象的計(jì)算(suàn)屬性。這(zhè)是一個常見且很(hěn)有用(yòng)的技巧：
js
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
template
<div :class="classObject"></div>
綁定數組
我們可以給 :class 綁定一個數組來(lái)渲染多個 CSS class：
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
template
<div :class="[activeClass, errorClass]"></div>
渲染的結果是：
template
<div class="active text-danger"></div>
如果你(nǐ)也(yě)想在數組中有條件地渲染某個 class，你(nǐ)可以使用(yòng)三元表達式：
template
<div :class="[isActive ? activeClass : '', errorClass]"></div>
errorClass 會(huì)一直存在，但(dàn) activeClass 隻會(huì)在 isActive 爲真時(shí)才存在。
然而，這(zhè)可能(néng)在有多個依賴條件的 class 時(shí)會(huì)有些(xiē)冗長。因此也(yě)可以在數組中嵌套對(duì)象：
template
<div :class="[{ active: isActive }, errorClass]"></div>
在組件上(shàng)使用(yòng)
本節假設你(nǐ)已經有 Vue 組件的知(zhī)識基礎。如果沒有，你(nǐ)也(yě)可以暫時(shí)跳過，以後再閱讀。
對(duì)于隻有一個根元素的組件，當你(nǐ)使用(yòng)了(le) class attribute 時(shí)，這(zhè)些(xiē) class 會(huì)被添加到(dào)根元素上(shàng)，并與該元素上(shàng)已有的 class 合并。
舉例來(lái)說，如果你(nǐ)聲明(míng)了(le)一個組件名叫 MyComponent，模闆如下(xià)：
template
<!-- 子組件模闆 -->
<p class="foo bar">Hi!</p>
在使用(yòng)時(shí)添加一些(xiē) class：
template
<!-- 在使用(yòng)組件時(shí) -->
<MyComponent class="baz boo" />
渲染出的 HTML 爲：
template
<p class="foo bar baz boo">Hi!</p>
Class 的綁定也(yě)是同樣的：
template
<MyComponent :class="{ active: isActive }" />
當 isActive 爲真時(shí)，被渲染的 HTML 會(huì)是：
template
<p class="foo bar active">Hi!</p>
如果你(nǐ)的組件有多個根元素，你(nǐ)将需要指定哪個根元素來(lái)接收這(zhè)個 class。你(nǐ)可以通過組件的 $attrs 屬性來(lái)實現(xiàn)指定：
template
<!-- MyComponent 模闆使用(yòng) $attrs 時(shí) -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
template
<MyComponent class="baz" />
這(zhè)将被渲染爲：
html
<p class="baz">Hi!</p>
<span>This is a child component</span>
你(nǐ)可以在透傳 Attribute 一章中了(le)解更多組件的 attribute 繼承的細節。
綁定内聯樣式
綁定對(duì)象
:style 支持綁定 JavaScript 對(duì)象值，對(duì)應的是 HTML 元素的 style 屬性：
js
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
template
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
盡管推薦使用(yòng) camelCase，但(dàn) :style 也(yě)支持 kebab-cased 形式的 CSS 屬性 key (對(duì)應其 CSS 中的實際名稱)，例如：
template
<div :style="{ 'font-size': fontSize + 'px' }"></div>
直接綁定一個樣式對(duì)象通常是一個好(hǎo)主意，這(zhè)樣可以使模闆更加簡潔：
js
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
template
<div :style="styleObject"></div>
同樣的，如果樣式對(duì)象需要更複雜(zá)的邏輯，也(yě)可以使用(yòng)返回樣式對(duì)象的計(jì)算(suàn)屬性。
綁定數組
我們還可以給 :style 綁定一個包含多個樣式對(duì)象的數組。這(zhè)些(xiē)對(duì)象會(huì)被合并後渲染到(dào)同一元素上(shàng)：
template
<div :style="[baseStyles, overridingStyles]"></div>
自(zì)動前綴
當你(nǐ)在 :style 中使用(yòng)了(le)需要浏覽器特殊前綴的 CSS 屬性時(shí)，Vue 會(huì)自(zì)動爲他(tā)們加上(shàng)相應的前綴。Vue 是在運行時(shí)檢查該屬性是否支持在當前浏覽器中使用(yòng)。如果浏覽器不支持某個屬性，那麽将嘗試加上(shàng)各個浏覽器特殊前綴，以找到(dào)哪一個是被支持的。
樣式多值
你(nǐ)可以對(duì)一個樣式屬性提供多個 (不同前綴的) 值，舉例來(lái)說：
template
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
數組僅會(huì)渲染浏覽器支持的最後一個值。在這(zhè)個示例中，在支持不需要特别前綴的浏覽器中都會(huì)渲染爲 display: flex。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發