對(duì)象方法
-最簡(jiǎn)單的綁定(這里的active加不加單引號(hào)都可以,以下也一樣都能渲染)
:class="{ 'active': isActive }"
判斷是否綁定一個(gè)active
:class="{'active':isActive==-1}"或者:class="{'active':isActive==index}"
綁定并判斷多個(gè)
第一種(用逗號(hào)隔開):class="{ 'active': isActive, 'sort': isSort }"第二種(放在data里面)//也可以把后面綁定的對(duì)象寫在一個(gè)變量放在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}}}
數(shù)組方法
單純數(shù)組
:class="[isActive,isSort]"data(){return{isActive:'active',isSort:'sort'}}
數(shù)組與三元運(yùn)算符結(jié)合判斷選擇需要的class
(注意:三元運(yùn)算符后面的“:”兩邊的class需要加上單引號(hào)戴而,否則不能正確渲染)
:class="[isActive?'active':'']"或者:class="[isActive==1?'active':'']"或者:class="[isActive==index?'active':'']"或者:class="[isActive==index?'active':'otherActiveClass']"
數(shù)組對(duì)象結(jié)合動(dòng)態(tài)判斷
//前面這個(gè)active在對(duì)象里面可以不加單引號(hào)驼鞭,后面這個(gè)sort要加單引號(hào):class="[{ active: isActive }, 'sort']"或者:class="[{ active: isActive==1 }, 'sort']"或者:class="[{ active: isActive==index }, 'sort']"