vue動態綁定類名 class

1.  三元表達式

:class=" hasShow?'actived':' ' "

 

2: 對象語法

: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 } } }

 

3. 數組方法

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

• 數組對象結合動態判斷

//前面這個active在對象里面可以不加單引號，后面這個sort要加單引號

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