Vue 學(xué)習(xí)筆記入門篇： v--bind以及class與style的綁定
應(yīng)用場景: DOM 元素經(jīng)常會動態(tài)地綁定一些 class 類名或 style 樣式
4.1 了解bind指令
v--bind的復(fù)習(xí)
鏈接的 href 屬性和圖片的 src 屬性都被動態(tài)設(shè)置了屁柏，當(dāng)數(shù)據(jù)變化時，就會重新渲
染部脚。
在數(shù)據(jù)綁定中建邓，最常見的兩個需求就是元素的樣式名稱 class 和內(nèi)聯(lián)樣式 style 的動
態(tài)綁定，它們也是 HTML的屬性，因此可以使用 v--bind 指令茂洒。我們只需要用 v--bind
計算出表達式最終的字符串就可以，不過有時候表達式的邏輯較復(fù)雜瓶竭，使用字符串
拼接方法較難閱讀和維護督勺，所以 Vue.js 增強了對 class 和 style 的綁定渠羞。
4.2 綁定 class 的幾種方式
4.2.1 對象語法
我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：
<div v-bind:class="{ active: isActive }"></div>
上面的語法表示 active 這個 class 存在與否將取決于數(shù)據(jù)屬性 isActive 的 truthiness智哀。
isActive 值為true / false
當(dāng) class 的表達式過長或邏輯復(fù)雜時次询，還可以綁定一個計算屬性，這是一種很友好和常見的
用法瓷叫，一般當(dāng)條件多于兩個時屯吊， 都可以使用 data 或 computed
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
4.2.2 數(shù)組語法
當(dāng)需要應(yīng)用多個 class 時， 可以使用數(shù)組語法 摹菠， 給：class 綁定一個數(shù)組盒卸，應(yīng)用一個 class
列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染成
<div class="active text-danger"></div>
數(shù)組成員直接對應(yīng)className--類名
可以用三目運算實現(xiàn),對象和數(shù)組混用
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
4.2.3 在組件上使用
4.3 綁定內(nèi)聯(lián)樣式
使用 v--bind:style （即：style ） 可以給元素綁定內(nèi)聯(lián)樣式，方法與 ：class 類似次氨，
也有對象語法和
數(shù)組語法蔽介，看起來很像直接在元素上寫 CSS:
注意 : css 屬性名稱使用駝峰命名（ came!Case ）或短橫分隔命名（ kebab-case
），
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接綁定到一個樣式對象通常更好糟需，這會讓模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
- 應(yīng)用多個樣式對象時 屉佳， 可以使用數(shù)組語法 ：在實際業(yè)務(wù) 中,style 的數(shù)組語法并不常
用 ， 因為往往可以寫在一個對象里面 ： 而較為常用 的應(yīng)當(dāng)是計算屬性 - 使用 :style 時洲押， Vue .js 會自動給特殊的 css 屬性名稱增加前綴武花， 比如 transform 。
- 無需再加前綴屬性ｈ菊省Ｌ寤！挑童！
復(fù)習(xí)：
v-bind通常用來綁定屬性的累铅，格式是v-bind：屬性名 = "值"，簡寫:屬性名 = "值"
變量語法：v-bind：class = "變量"站叼，變量形式 ,這里的變量的值娃兽，通常是在css定義好的類名；
數(shù)組語法：v-bind：class= "[變量1尽楔，變量2]" 投储，數(shù)組形式，其實跟上面差不多阔馋，只不過可以同時綁定多個class名玛荞；
對象語法：v-bind:class = {classname1：boolean，classname2：boolean}呕寝，對象形式勋眯，這里的classname1（2）其實就是樣式表中的類名，這里的boolean通常是一個變量，也可以是常量客蹋、計算屬性等塞蹭，這種方法也是綁定class最常用的方式。
