vue绑定Class属性和style样式的用处

很多时候我们在做开发的途中，一般不会遇到需要用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一起使用。