vue动态绑定class vue

1.v-bind:class 一个对象，以动态地切换 class：

结果为：

2.样式动态绑定对象

data: { classObject: { active: true, 'text-danger': false } } 结果同上

3.数组语法：把数组传给v-bind:class

data: { activeClass: 'active', errorClass: 'text-danger' } 结果：

4.三元表达式

5.绑定内联样式
a.绑定变量

"{ color: activeColor, fontSize: fontSize + 'px' }"> data: { activeColor: 'red', fontSize: 30 }

b.绑定对象

data: { styleObject: { color: 'red', fontSize: '13px' } }

c.数组语法绑定多个样式对象

【vue动态绑定class】d.多重值，兼容浏览器

会渲染数组中浏览器支持的前缀的值，如果无兼容问题，会渲染最后一个 :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">

vue动态绑定class