Vue.js 樣式繫結
Vue.js class
class 與 style 是 HTML 元素的屬性,用於設定元素的樣式,我們可以用 v-bind 來設定樣式屬性。
Vue.js v-bind 在處理 class 和 style 時, 專門增強了它。表示式的結果型別除了字串之外,還可以是物件或陣列。
class 屬性繫結
我們可以為 v-bind:class 設定一個物件,從而動態的切換 class:
例項 1
例項中將 isActive 設定為 true 顯示了一個綠色的 div 塊,如果設定為 false 則不顯示:
<div v-bind:class="{ 'active': isActive }"></div>
嘗試一下 ?
以上例項 div class 為:
<div class="active"></div>
我們也可以在物件中傳入更多屬性用來動態切換多個 class 。
例項 2
text-danger 類背景顏色覆蓋了 active 類的背景色:
<div class="static"
v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>
嘗試一下 ?
以上例項 div class 為:
<div class="static active text-danger"></div>
我們也可以直接繫結資料裡的一個物件:
例項 3
text-danger 類背景顏色覆蓋了 active 類的背景色:
<div id="app">
<div v-bind:class="classObject"></div>
</div>
嘗試一下 ?
例項 3 與 例項 2 的渲染結果是一樣的。
此外,我們也可以在這裡繫結返回物件的計算屬性。這是一個常用且強大的模式:
例項 4
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
嘗試一下 ?
陣列語法
我們可以把一個數組傳給 v-bind:class ,例項如下:
例項 5
<div v-bind:class="[activeClass, errorClass]"></div>
嘗試一下 ?
以上例項 div class 為:
<div class="active text-danger"></div>
我們還可以使用三元表示式來切換列表中的 class :
例項 6
errorClass 是始終存在的,isActive 為 true 時新增 activeClass 類:
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
嘗試一下 ?
Vue.js style(內聯樣式)
我們可以在 v-bind:style 直接設定樣式:
例項 7
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">入門教學</div>
</div>
嘗試一下 ?
以上例項 div style 為:
<div style="color: green; font-size: 30px;">入門教學</div>
也可以直接繫結到一個樣式物件,讓模板更清晰:
例項 8
<div id="app">
<div v-bind:style="styleObject">入門教學</div>
</div>
嘗試一下 ?
v-bind:style 可以使用陣列將多個樣式物件應用到一個元素上:
例項 9
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">入門教學</div>
</div>
嘗試一下 ?
注意:當 v-bind:style 使用需要特定字首的 CSS 屬性時,如 transform ,Vue.js 會自動偵測並新增相應的字首。