06 Vue的模板語法- v-bind綁定class及style - iT 邦幫忙 | vue語法
綁定classv-bind:class可以與原本的class屬性共存,意思就是說原本HTML屬性上已經有定class了,後面可以再接v-bind:class來做動態綁定,原先的class不會被洗掉。而綁定為class的資料可以是字串、物件、陣列。字串跟一般綁定字串的方法一樣,將fontColor綁定至class(以下省略一些code):
v-bind:class可以與原本的class屬性共存,意思就是說原本HTML屬性上已經有定class了,後面可以再接v-bind:class來做動態綁定,原先的class不會被洗掉。而綁定為class的資料可以是字串、物件、陣列。
字串跟一般綁定字串的方法一樣,將fontColor綁定至class(以下省略一些code):
<p :class="fontColor"></p> ˙ ˙ ˙ new Vue({ ˙ data:{ fontColor : "red" } });render結果
<p class="red"></p> 物件使用物件語法來動態切換class:
<div class="item" v-bind:class="{ active: isActive, error: hasError }"></div> data: { isActive: true, //出現 hasError: false //不出現 }在物件內active表示class的名稱,而isActive則用來決定active這個class的套用與否,若為true則套用,false就移除。因此render結果:
<div class="item" v-bind:class=active"></div>若覺得全都寫在html裡很長很難辨識,也可以把它定義在data裡
<div class="item" v-bind:class="classObject"></div> data: { classObject: { active: true, error: false } } 陣列可將多個字串性質的class綁定至元素上
<div v-bind:class="[activeClass, errorClass]"></div>...