【vue】Vue中class样式的动态绑定

简介：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>

数组里加三元运算符

<div :class="[isActive?xd_border:'',xd_bg]">测试</div>

写在data中

<div :class="list">⼩滴课堂</div>
data:{
  list:['border', 'bg_red']
}