Class 绑定
对象语法
通过对象语法，你可以根据条件为元素添加或删除类。
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
在上面的例子中，active 类会在 isActive 为 true 时添加，text-danger 类会在 hasError 为 true 时添加。
数组语法
你还可以使用数组语法，将多个类应用到同一个元素。
<div v-bind:class="[activeClass, errorClass]"></div>
在这个例子中，activeClass 和 errorClass 变量的值会被当作类名应用到该元素。
条件语法
在条件语法中，你可以直接绑定一个对象或数组，也可以在计算属性中返回一个对象或数组。
<div v-bind:class="getClassObject()"></div>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
},
methods: {
getClassObject: function() {
return {
active: this.isActive,
'text-danger': this.hasError
};
}
}
});
Style 绑定
对象语法
使用对象语法，你可以动态地设置元素的内联样式。
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
在这个例子中，textColor 和 fontSize 变量的值会被当作样式属性应用到该元素。
数组语法
数组语法允许你将多个样式对象应用到同一个元素。
<div v-bind:style="[baseStyles, extraStyles]"></div>
在这里，baseStyles 和 extraStyles 变量的值会被当作样式属性应用到该元素。
自动添加前缀
如果你使用了 autoprefixer，Vue.js 会自动为内联样式添加相应的浏览器前缀。
<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
在上述例子中，Vue.js 会根据浏览器自动添加相应的前缀。
总的来说，Vue.js 的 v-bind 可以方便地帮助你根据数据状态动态地管理元素的类和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/4799/Vue