总结一下,vue实现动态class主要通过以下三种方式文章来源地址https://www.toymoban.com/news/detail-808527.html
1 通过对象方式
动态绑定一个类名的写法
:class="{ 'on': ifOn }"
动态绑定多个类名的写法
:class="{ 'on': ifOn, 'disabled': ifDisabled }"
如 ifOn / ifDisabled 都是vue的变量，为真则对应key的class类名生效
当动态class类名过多/条件判断过于复杂，可通过定义变量/使用computed属性来实现
定义变量方式
:class="classConfig"
data() {
return {
classConfig:{ on: true, disabled: false }
}
}
computed属性方式
data() {
return {
on: true,
disabled: false
}
}
computed: {
classConfig: function () {
return {
on: this.on,
disabled: this.disabled
}
}
}
2 通过数组方式
通过变量直接绑定
:class="[className1, className2]"
data() {
return{
className1:'className1',
className2:'className2'
}
}
通过三元表达式条件判断
单个
:class="[ifOn ? 'on' : 'not-on' ]"
多个
:class="[ifOn ? 'on' : 'not-on', ifDisabled ? 'disabled' : 'not-disabled' ]"3 通过数组+对象嵌套方式
:class="[{ 'on': ifOn }, 'disbaled']"4 总结
对象方法主要通过
{'className': Boolean}
Boolean为vue内部定义的变量，为真则生效
数组方法主要通过
[Boolean? 'className1': 'className2' ]
Boolean为vue内部定义的变量，为真则className1生效，反之则className2生效
两者结合主要是数组内嵌对象格式
className需要加引号文章来源：https://www.toymoban.com/news/detail-808527.html
到了这里，关于vue实现动态class的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[VUE学习]权限管理系统前端vue实现9-动态路由，动态标签页，动态面包屑](https://imgs.yssmx.com/Uploads/2024/02/541195-1.png)
