vue動態綁定class的幾種方式

對象方法

-最簡單的綁定（這里的active加不加單引號都可以，以下也一樣都能渲染）

:class="{ 'active': isActive }" 

• 判斷是否綁定一個active

: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需要加上單引號，否則不能正確渲染）

: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']"