【Vue基础】:class的几种绑定方式

最简单的绑定

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

单纯数组

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

数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class="[{active: isActive},'sort']"
//或者
:class="[{active: isActive == 1}, 'sort']"
//或者
:class="[{active: isActive == index}, 'sort']"

数组与三元运算符结合判断选择需要的class

:class="[isActive?'active':'']"
//或者
:class="[isActive==1?'active':'']"
//或者
:class="[isActive==index?'active':'']"
//或者
:class="[isActive==index?'active':'otherActiveClass']"

最后

以上就是开放黄蜂为你收集整理的【Vue基础】:class的几种绑定方式的全部内容，希望文章能够帮你解决【Vue基础】:class的几种绑定方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。