很多时候我们在做开发的途中,一般不会遇到需要用v-bind绑定class属性的地方,其实这是一个比较关键的绑定,决定了某个<div>是否在某一时刻运用某一种class属性的辩解。<div class="static" v-bind:class="{active: isActive, 'text-danger': hasError}"></div> 在此证明关于v-bind:class可以与普通的class属性共存,也可以控制某个class属性是否存在,这就取决于方法如何使得isActive或者hasError是 true 还是 false。
<div v-bind:class="classObject"></div>
data:{
classObject:{
active: true,
'text-danger': false
}
}
<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: 'active', errorClass: 'text-danger' }
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30 }
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
v-show 和 v-if : v-show的渲染会被保留在DOM中,v-if的修饰会彻底消失
大面积的切换建议用v-show 不推荐v-if和v-for一起使用。