一:class
对象语法:
<div class="static" :class="{active:isactive,search:isSearch}"></div>
data:{
isactive:ture,
isSearch:false
}
结果div标签的class的样式就是
<div class="static active"></div>
如果动态绑定的class太多,也可以用对象的形式
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
search: false
}
}
最后的效果是一样的
也可以用计算属性
data: {
isActive: true,
error: null,
search: false
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
search: this.error && this.error.type === 'fatal'
}
}
}
数组语法:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
或者
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
二:style内联样式
对象语法:
<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'
}
}
对象语法常常结合返回对象的计算属性使用。
数组语法:
<div v-bind:style="[baseStyles, overridingStyles]"></div>