本篇内容主要讲解“Vue动态绑定Class的常用方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue动态绑定Class的常用方式有哪些”吧!第一种:基础用法html部分:<div
本篇内容主要讲解“Vue动态绑定Class的常用方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue动态绑定Class的常用方式有哪些”吧!
html部分:
<div :class="active">基本用法</div>
js部分:
data() { return { active: 'active' }}
Html部分:
<div :class="isBind ? 'active' : ''">三元运算</div><div :class="[isBind ? 'active' : '', active]">使用数组</div>
Js部分:
data() { return { isBind: false, active: 'active' }}
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 != '' } }}
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的常用方式有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
--结束END--
本文标题: Vue动态绑定Class的常用方式有哪些
本文链接: https://www.lsjlt.com/news/351142.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
2024-05-13
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0