Vue 學(xué)習(xí)筆記入門篇： v--bind以及class與style的綁定
應(yīng)用場景: DOM 元素經(jīng)常會(huì)動(dòng)態(tài)地綁定一些 class 類名或 style 樣式
4.1 了解bind指令
v--bind的復(fù)習(xí)
鏈接的 href 屬性和圖片的 src 屬性都被動(dòng)態(tài)設(shè)置了，當(dāng)數(shù)據(jù)變化時(shí)，就會(huì)重新渲
染。
在數(shù)據(jù)綁定中，最常見的兩個(gè)需求就是元素的樣式名稱 class 和內(nèi)聯(lián)樣式 style 的動(dòng)
態(tài)綁定，它們也是 HTML的屬性，因此可以使用 v--bind 指令。我們只需要用 v--bind
計(jì)算出表達(dá)式最終的字符串就可以，不過有時(shí)候表達(dá)式的邏輯較復(fù)雜，使用字符串
拼接方法較難閱讀和維護(hù)，所以 Vue.js 增強(qiáng)了對(duì) class 和 style 的綁定。
4.2 綁定 class 的幾種方式
4.2.1 對(duì)象語法
我們可以傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：
<div v-bind:class="{ active: isActive }"></div>
上面的語法表示 active 這個(gè) class 存在與否將取決于數(shù)據(jù)屬性 isActive 的 truthiness。
isActive 值為true / false
當(dāng) class 的表達(dá)式過長或邏輯復(fù)雜時(shí)，還可以綁定一個(gè)計(jì)算屬性，這是一種很友好和常見的
用法，一般當(dāng)條件多于兩個(gè)時(shí)， 都可以使用 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)用多個(gè) class 時(shí)， 可以使用數(shù)組語法 ， 給：class 綁定一個(gè)數(shù)組，應(yīng)用一個(gè) class
列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染成
<div class="active text-danger"></div>
數(shù)組成員直接對(duì)應(yīng)className--類名
可以用三目運(yùn)算實(shí)現(xiàn),對(duì)象和數(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 類似，
也有對(duì)象語法和
數(shù)組語法，看起來很像直接在元素上寫 CSS:
注意 : css 屬性名稱使用駝峰命名（ came!Case ）或短橫分隔命名（ kebab-case
），
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接綁定到一個(gè)樣式對(duì)象通常更好，這會(huì)讓模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
- 應(yīng)用多個(gè)樣式對(duì)象時(shí) ， 可以使用數(shù)組語法 ：在實(shí)際業(yè)務(wù) 中,style 的數(shù)組語法并不常
用 ， 因?yàn)橥梢詫懺谝粋€(gè)對(duì)象里面 ： 而較為常用 的應(yīng)當(dāng)是計(jì)算屬性 - 使用 :style 時(shí)， Vue .js 會(huì)自動(dòng)給特殊的 css 屬性名稱增加前綴， 比如 transform 。
- 無需再加前綴屬性?。。?！
復(fù)習(xí)：
v-bind通常用來綁定屬性的，格式是v-bind：屬性名 = "值"，簡寫:屬性名 = "值"
變量語法：v-bind：class = "變量"，變量形式 ,這里的變量的值，通常是在css定義好的類名；
數(shù)組語法：v-bind：class= "[變量1，變量2]" ，數(shù)組形式，其實(shí)跟上面差不多，只不過可以同時(shí)綁定多個(gè)class名；
對(duì)象語法：v-bind:class = {classname1：boolean，classname2：boolean}，對(duì)象形式，這里的classname1（2）其實(shí)就是樣式表中的類名，這里的boolean通常是一個(gè)變量，也可以是常量、計(jì)算屬性等，這種方法也是綁定class最常用的方式。
