v-bind用于绑定html标签属性。但是,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
一、对象语法
1.匿名对象:直接在html指定boolean变量名,在data中对变量赋值
<!--匿名对象-->
<div id="simple">
<div class="box" v-bind:class={bkg_red:isRed,font_blue:isBlue}>匿名对象</div>
</div>
<script>
var simple = new Vue({
el:"#simple",
data:{
isRed:true,
isBlue:false,
}
})
</script>
2.引用对象名:html中只指定了对象名,data中对对象的具体属性进行赋值
<!--引用对象名-->
<div id="objectName">
<div class="box" v-bind:class="classObject">引用对象名</div>
</div>
<script>
var simple = new Vue({
el:"#objectName",
data:{
classObject:{
bkg_red:true,
font_blue:false,
},
}
})
</script>
3.使用计算属性:类似2,不同的是,对象中变量的值可通过其他变量运算得出
<!--引用计算属性computed-->
<div id="computedClass">
<div class="box" v-bind:class="computedClass">引用计算属性computed</div>
</div>
<script>
var computedClass = new Vue({
el:"#computedClass",
data:{
isRed:true,
isBlue:false,
error:null
},
computed:{
computedClass:function () {
return {
bkg_red:this.isRed && !this.error,
font_blue:this.isBlue && !this.error
}
}
}
})
</script>
总结:从1到3,结构上趋向封装,赋值方式趋向丰富
二、数组语法
<!--数组语法-->
<div id="arrayClass">
<div class="box" v-bind:class="[bkgClass,fontClass]">引用计算属性computed</div>
</div>
<script>
var computedClass = new Vue({
el:"#arrayClass",
data:{
bkgClass:'bkg_red',//数组的键值对赋值,key键为虚拟dom中class的绑定数值,value值为实际dom中的class名
fontClass:'font_blue',
},
})
</script>
渲染为:<div class='box bkg_red font_blue'></div>
我还是比较喜欢对象语法