Vue动态绑定Class的几种常用方式

在vue框架开发中,有时候我们需要对元素的样式进行动态控制,比如tab按钮的切换,下面这篇文章主要给大家介绍了关于Vue动态绑定Class的几种常用方式,需要的朋友可以参考下

第一种：基础用法

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         } }