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>