#####對象方法
-最簡單的綁定（這里的active加不加單引號都可以，以下也一樣都能渲染）
:class="{ 'active': isActive }"
1
判斷是否綁定一個active
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
1
2
3
綁定並判斷多個
第一種（用逗號隔開）
: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
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#####數組方法
單純數組
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
1
2
3
4
5
6
7
數組與三元運算符結合判斷選擇需要的class
（注意：三元運算符后面的“：”兩邊的class需要加上單引號，否則不能正確渲染）
:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"
1
2
3
4
5
6
7
數組對象結合動態判斷
//前面這個active在對象里面可以不加單引號，后面這個sort要加單引號
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"
————————————————
版權聲明：本文為CSDN博主「前端那點事」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43077894/article/details/83544399