1.綁定HTML Class

<!-- 對(duì)象語(yǔ)法 -->
<!-- 最終生成class="warp active error" -->
<div class="warp" :class="classObject"></div>

<!-- 數(shù)組語(yǔ)法 -->
<!-- 最終生成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.綁定內(nèi)聯(lián)樣式

<!-- 對(duì)象語(yǔ)法 -->
<!-- 最終生成style="color: red; font-size: 16px;" -->
<div :style="styleObject"></div>

<!-- 數(shù)組語(yǔ)法 -->
<!-- 最終生成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會(huì)自動(dòng)為某些CSS屬性添加特定前綴，2.30+可以為style綁定中屬性提供一個(gè)數(shù)組(多重值)如：
<div :style="{display:['-ms-flexbox', 'flex']}"></div>