Vue动态绑定Class的几种常用方式
更新时间:2023年03月09日 08:55:36 作者:丑小喵呀
在vue框架开发中,有时候我们需要对元素的样式进行动态控制,比如tab按钮的切换,下面这篇文章主要给大家介绍了关于Vue动态绑定Class的几种常用方式,需要的朋友可以参考下
第一种:基础用法
Html部分:
<div :class="active">基本用法</div>
Js部分:
data() { return { active: 'active' } }
第二种:三元运算绑定单个 / 数组形式绑定多个Class
Html部分:
<div :class="isBind ? 'active' : ''">三元运算</div> <div :class="[isBind ? 'active' : '', active]">使用数组</div>
Js部分:
data() { return { isBind: false, active: 'active' } }
第三种:计算属性绑定单个或多个Class
Html部分:
<div :class="classObject">使用计算属性</div>
Js部分:
data() { return { active: 'active', finishData: '2022-10-18 00:00:00' } }, computed: { classObject() { return { active: this.isBind, 'red-color': this.finishData != '' } } }
第四种:使用函数绑定Class
Html部分:可自定义传参
div :class="bindClass(currDate,finishData)">函数绑定</div>
Js部分:可处理复杂逻辑
data() { return { currDate: '2022-10-20 00:00:00', finishData: '2022-10-18 00:00:00' } }, methods: { // 动态绑定Class bindClass(currDate,finishData){ let classInfo = { redColor: false, active: true } if(new Date(finishData).getTime() > new Date(currDate).getTime()){ classInfo.redColor = true } return classInfo } }
总结
到此这篇关于Vue动态绑定Class的几种常用方式的文章就介绍到这了,更多相关Vue动态绑定Class内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue之beforeEach非登录不能访问的实现(代码亲测)
这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-07-07如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)
这篇文章主要给大家介绍了关于如何巧用Vue.extend继承组件实现el-table双击可编辑的相关资料,不使用v-if、v-else,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论