vue中class和style绑定方法有哪些?
:class
a.绑定变量
<div :class="{classA:a , classB: b}"/></div>
new Vue({
el:'#app',
data:{
a:true,//根据true/false判断是否执行class
b:true
}
})
b.绑定对象
<div :class="test"></div>
new Vue({
el:'#app',
data:{
test:{
color:red;
background:blue;
}
}
})
c.绑定一个数组
<div :class="[test1,test2]"></div>
new Vue({
el:'#app',
data:{
test1Class:test1,
test2Class:test2
}
})
d.绑定三元表达式
:class="[A>B?'signSpanChange':'signSpan']"
new Vue({
el:'#app',
data:{
A:"",
B:""
}
})
:style
a、绑定变量
:style="{color:cl,background:bk}"
new Vue({
el:'#app',
data:{
cl:'red',
bk:'yellow'
}
})
b.绑定一个对象
:style="testObj"
new Vue({
el:'#app',
data:{
testObj:{
color:red;
background:yellow;
}
}
})
c.绑定函数返回值
:style="{background:BackType(sign.status)}"
methods: {
BackType: function(status) {
if (status == "已完成") return "#d7f2e6";
if (status == "工作中") return "#23b7e5";
}
}
d.绑定三元运表达式
:style="{ background: [name==calendar?'red':'blue'] }"