1.绑定HTML Class
<!-- 对象语法 -->
<!-- 最终生成class="warp active error" -->
<div class="warp" :class="classObject"></div>
<!-- 数组语法 -->
<!-- 最终生成class="active error" -->
<div :class="[activeClass, errorClass]"></div>
<!-- 最终生成class="error" -->
<div :class="[!isActive ? activeClass : '', errorClass]"></div>
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: true,
activeClass: "active",
errorClass: "error"
},
computed: {
classObject: function () {
return {
active: this.isActive,
error: this.error
}
}
}
});
2.绑定内联样式
<!-- 对象语法 -->
<!-- 最终生成style="color: red; font-size: 16px;" -->
<div :style="styleObject"></div>
<!-- 数组语法 -->
<!-- 最终生成style="color: blue; font-size: 18px;" -->
<div :style="[baseStyle, overridStyle]"></div>
var app = new Vue({
el: "#app",
data:{
baseStyle: {color: "red", fontSize: "16px"},
overridStyle: {color: "blue", fontSize: "18px"}
},
computed: {
styleObject: function () {
return {
color: "red",
fontSize: "16px"
};
}
}
});
v-bind:style会自动为某些CSS属性添加特定前缀，2.30+可以为style绑定中属性提供一个数组(多重值)如：
<div :style="{display:['-ms-flexbox', 'flex']}"></div>
