vue赋值样式_vue 绑定样式的几种方式

vue 绑定样式

对象语法

1.v-bind:class设置一个对象，动态切换class

xxx

样式是否起作用，根据isActive的布尔值是否为true

2.:class可以和class共存

xxx

当isActive值为true，isError为false，样式为 static和isActive。

当isActive值为false，isError为true，样式为 static和isError。

当isActive值为true，isError为true ，样式为 static和isActive、isError

3. :class可以绑定数据中的对象

xxx

export default{

data(){return{

classobj:{//可以直接绑定一个对象，对象里面有多个样式

active:true,

error:false}

}

}

}

数组语法

4.v-bind:class设置一个数组

使用了数组就要在data中指定重命名

xxx

export default{

data(){return{

activeCls:'active', //相当于样式active样式在div中重命名 为activeCls

errorCls:'