實際開發(fā)中路召，標簽的class通常不會使用一個普通字符串寫死，而是動態(tài)地給標簽綁定class，有2種綁定語法：對象語法和數(shù)組語法茄螃。
對象語法（常用）
綁定方式是使用對象 v-bind:class="{ }"。
對象{ }由鍵值對構(gòu)成夹厌，鍵是類名豹爹，值是布爾值。
如下所示：
<h2 v-bind:class="{類名1:boolean矛纹，類名2:boolean}">
對象語法的核心是：根據(jù)布爾值臂聋，判斷要不要給標簽加上某個類。要點在于或南，Boolean不僅可以通過data定義孩等，還可以通過計算獲得（比如使用===來計算true或false）。
使用 :class 代替 v-bind:class
// 演示1：給標簽動態(tài)綁定class
1.dom
<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
2.數(shù)據(jù)
data:{
message:"你好",
isActive:true,
isLine:true
}
// 這樣h2的兩個類都會顯示采够。
// 演示2：點一下按鈕 h2變紅肄方，再點擊一下h2變黑
1.dom
<div id="app">
<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<button v-on:click="btnClick">按鈕</button>
</div>
2.vue實例
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
}
}
})
如果對象太長
可以把對象綁定成一個 methods，或使用 computed 計算屬性蹬癌。
即可以把這個對象寫成一個方法权她，再把方法放到vue實例的methods屬性里面。
methods
<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按鈕</button>
<!--注意方法名getClasses()后面要加小括號-->
<!--btnClick不用加小括號的原因是：小括號被省掉了逝薪，其實調(diào)用函數(shù)都得加小括號-->
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive //注意要加this
},
getClasses: function () {
return {active: this.isActive, line: this.isLine} //注意要加this
}
}
})
</script>
總結(jié)
- 固定的class隅要，使用class=""，可能之后會刪的董济，使用v-bind:class="{}"步清。
- class=""和v-bind:class="{}"可以一起寫，不沖突虏肾。
