当前栏目
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
}
}
相关文章
- SpringBoot---入门和配置
- SpringBoot2----容器功能
- SpringBoot2---Web原生组件注入(Servlet、Filter、Listener)和嵌入式Servlet容器
- SpringBoot2----定制化原理
- VUE 响应式原理
- [前端面试]每日一题
- 玻璃拟态是什么?前端该如何实现
- 前端可视化建模中的连线策略
- 从Vue源代码中来聊聊[Symbol.toPrimitive]方法
- 前端运维之Shell运算符
- Shell变量-前端工程师必备的运维知识
- 环境 & 调试 (1)
- Spring全注解开发---声明式事务模块
- 低代码开发,推荐一款Web 端自动化神器:Automa!
- JavaScript知识盲区整理
- JS事件篇
- Spring MVC和springboot静态资源处理详细总结
- JS高级部分
- 前端:Canvas进行简单图片压缩算法
- SpringBoot2学习(三):原生组件注入