vue设置isactive_vue 绑定样式的几种方式

vue 绑定样式  ( 中文API：https://www.runoob.com/vue2/vue-class-style.html)

对象语法

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:'error'}}

}

.active{xxx}.error{xxx}

5.三元表达式

xxx

export default{data(){

return{

isActive:true,

activeCls:'active', //当isActive值为true时，会执行activeCls对应的样式 active 并且执行baseClass对应的样式 baseclass

errorCls:'error', //当isActive值为false时，会执行errorCls对应的样式 error 并且执行baseClass对应的样式 baseclass

baseClass:'baseclass'}}

}

.active{background:red;

}.error{color:white;

}.baseclass{text-align:center;

}

三元表达式

6.数组语法中使用对象语法

xxx

export default{data(){

return{

isActive:true, //因为isActive值为true,样式为active 和 baseClass对应的 baseclass 所以样式为 active、baseclass

activeCls:'active',

baseClass:'baseclass'}}

}

.active{background:red;

}.baseclass{text-align:center;

}

7.定义一个数组通过不同索引值获取不同样式

created (){this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]},

根据support.type的数组变化，索引到classMap对应的样式

绑定内联样式

你好吗？

new Vue({el:'#app',

data:{

cl:'red',

bk:'yellow'}})

直接绑定到一个样式对象，让模板更清晰：

你好吗？

new Vue({el:'#app',

data:{

testObj:{

color:red;background:yellow;

}}

})