Question

如何利用Vue.js库中的v-bind绑定样式属性

Answer 1

1、布尔值旦中的绑定方式
<div id="demo">
<span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB}"模衫山></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
isA: true,
isB: true
}
})

2、变量的绑定方式
<div id="demo">
<span :class=[classA,classB]></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"class-a",
classB:"class-b"
}
})

3、字符串绑定方式塌带
<div id="demo">
<span :class="classA"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"string"
}
})

4、综合的写法
<div id="demo">
<span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})