简介：Vue中class样式的绑定
1、字符串写法
使用场景：样式的类型不确定
写法：
<div :class="xd_bg">测试账号</div>手动触发样式改变
注意：字符串使用的是vue实例data中已有的属性
2、对象写法
使用场景：样式个数、类名确定，通过Bollean动态展示与否
写法：
对象写在内联样式
<div :class="{bg_red:bg_red,border:border}">测试</div>对象写在data中
<div :class="list">测试</div>
data: {
list: {
bg_red: 'bg_red',
border: 'border',
},
}3、数组写法
使用场景：需要绑定的样式个数不确定，类名也不确定
写法：
内联写法
<div :class="[xd_border,xd_bg]">测试</div>数组里加三元运算符文章来源：https://www.toymoban.com/news/detail-612021.html
<div :class="[isActive?xd_border:'',xd_bg]">测试</div>写在data中文章来源地址https://www.toymoban.com/news/detail-612021.html
<div :class="list">⼩滴课堂</div>
data:{
list:['border', 'bg_red']
}到了这里，关于【vue】Vue中class样式的动态绑定的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
