第一种：基础用法
Html部分：
基本用法
Js部分：
data() {
return { active: 'active' }}
第二种：三元运算绑定单个 / 数组形式绑定多个Class
Html部分：
三元运算使用数组
Js部分：
data() {
return { isBind: false, active: 'active' }}
第三种：计算属性绑定单个或多个Class
Html部分：
使用计算属性
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)">函数绑定
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 }}