-最簡單的綁定(這裏的active加不加單引號均可以,如下也同樣都能渲染)html
:class="{ 'active': isActive }"
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
第一種(用逗號隔開)
:class="{ 'active': isActive, 'sort': isSort }"
第二種(放在data裏面)
//也能夠把後面綁定的對象寫在一個變量放在data裏面,能夠變成下面這樣
:class="classObject"
data() {
return {
classObject:{ active: true, sort:false }
}
}
第三種(使用computed屬性)
:class="classObject"
data() {
return {
isActive: true,
isSort: false
}
},
computed: {
classObject: function () {
return {
active: this.isActive,
sort:this.isSort
}
}
}
:class="[isActive,isSort]" data() { return{ isActive:'active', isSort:'sort' } }
(注意:三元運算符後面的「:」兩邊的class須要加上單引號,不然不能正確渲染)數組
:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"
//前面這個active在對象裏面能夠不加單引號,後面這個sort要加單引號
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"