vue动态绑定class的几种常用方式小结
更新时间：2019年05月21日 11:06:23 作者：前端那点事
这篇文章主要介绍了vue动态绑定class的几种常用方式,结合实例形式总结分析了vue.js常见的对象方法、数组方法进行class动态绑定相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue动态绑定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
}
}
}
数组方法
- 单纯数组
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
- 数组与三元运算符结合判断选择需要的class
（注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）
:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"
- 数组对象结合动态判断
//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Vue router错误跳转到首页("/")的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue.js 实现tab切换并变色操作讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了如何解决vue在ios微信"复制链接"功能问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue ssr+koa2构建服务端渲染的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue 定制上传按钮的样式的两种方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue下载二进制流图片操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue中的attribute和property的具体使用及区别
本文主要介绍了vue中的attribute和property的具体使用及区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue3项目如何使用prettier格式化代码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue2实现传送门效果的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论