欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue動態(tài)綁定class的幾種常用方式小結(jié)

 更新時間：2019年05月21日 11:06:23   作者：前端那點事  
這篇文章主要介紹了vue動態(tài)綁定class的幾種常用方式,結(jié)合實例形式總結(jié)分析了vue.js常見的對象方法、數(shù)組方法進行class動態(tài)綁定相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了vue動態(tài)綁定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
  }
 }
}

數(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']"

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

相關(guān)文章

最新評論