vue中怎么動態(tài)綁定class

本篇文章為大家展示了vue中怎么動態(tài)綁定class，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

對象方法

最簡單的綁定（這里的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
  }
 }
}

數(shù)組方法

• 單純數(shù)組
  

:class="[isActive,isSort]"
data() {
 return{
  isActive:'active',
  isSort:'sort'
 }
}

• 數(shù)組與三元運算符結(jié)合判斷選擇需要的class

（注意：三元運算符后面的“：”兩邊的class需要加上單引號，否則不能正確渲染）

:class="[isActive?'active':'']"

或者

:class="[isActive==1?'active':'']"

或者

:class="[isActive==index?'active':'']"

或者

:class="[isActive==index?'active':'otherActiveClass']"

• 數(shù)組對象結(jié)合動態(tài)判斷

//前面這個active在對象里面可以不加單引號，后面這個sort要加單引號
:class="[{ active: isActive }, 'sort']"

或者

:class="[{ active: isActive==1 }, 'sort']"

或者

:class="[{ active: isActive==index }, 'sort']"

上述內(nèi)容就是vue中怎么動態(tài)綁定class，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。