本文實例講述了vue動態綁定class的幾種常用方式。分享給大家供大家參考，具體如下：

對象方法

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

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

希望本文所述對大家vue.js程序設計有所幫助。