Class 与 Style 的绑定

操作元素的class 列表和内联样式是数据绑定的一个常见需求。因为他们都是属性，所以可以使用 v-bind 处理它们： 只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此，将v-bind 用于class 和 style时，Vue.js 做了一个专门的增强。表达式结果的类型除了是字符串之外，还可以是对象或者数组。

绑定 HTML Class

---

可以传递给v-bind:class 一个对象，以动态的切换class：

<style>
.active {
    color： red;
}
</style>


<div class="dynamic-toggle-class">
    <div :class="{ active:isActive }">
        active on/off
    </div>
    <a @click="toggleActive">toggle</a>
</div>


var toggleClass = new Vue({
    el:'.dynamic-toggle-class',
    data:{
        isActive:true
    },
    methods:{
        toggleActive: function () {
            this.isActive = !this.isActive;
        }
    }
});

上述语法表示 active 这个class 存在与否将区取决于数据属性 isActive 的 truthiness。
可以再对象中传入更多的属性来动态切换多个class， 此外 v-bind 指令也可以与普通的class 属性共存。

    <div class="static" :class="{ active: isActive, '.text-danger': hasError }">
    ...
    </div>
    
    // data
    {
        isActive: true,
        hasError: false
    }
    
    // result
    <div class="static active">...</div>

当isActive 或者 hasError 变化时，class 列表将会更新。例如，如果 hasError 的值为true，class 列表将变为 "static active text-danger"
绑定的数据对象不一定需要内联定义在模板里：

<div class="classObject">...</div>

data:{
    classObject:{
        active:true,
        'text-danger':false
    }
}

// 渲染结果与上面一样， 可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<div class="classObject">...</div>

data:{
    isActive:true,
    error: null
},
computed: {
    classObject:function(){
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type ==='fatal'
        }
    }
}

数组语法

可以将一个数组传给 v-bind:class, 以应用一个class列表。

    <div :class="[activeClass,errorClass]">
        ...
    </div>
    
    data:{
        activeClass:'active',
        errorClass:'text-danger'
    }
    
    // 渲染效果为：
    <div class="active text-danger">...</div>
    // 这样将始终添加errorClass，但是只有在 isActive 是 truthy 时候才添加activeClass。
    // 不过，当有多个条件class 的时候，为避免繁琐，可以再数组语法中使用对象语法。
    <div v-bind:class="[{ active: isActive }, errorClass]">...</div>

用在组件上

当在一个自定义组件上适应class 属性的时候，这些类将被添加到该组件的根元素上面。这个元素上面已经存在的类不被覆盖。
e.g.

    Vue.component('my-component',function(){
        template:'<p class="foo bar">SayHi</p>'
    });
    
    <my-componetnt class="baz boo"></my-component>
    
    // 最终渲染结果：
    <p class="foo bar baz boo"></p>
    
    // 对于带数据绑定的class 同样适用
    <my-component :class="{ active: isActive}"></my-component>
    
    // 当 isActive 为 truthy 时，Html 将被渲染成为：
    <p class="foo bar active"></div>

绑定内联样式

---

对象语法

v-bind:style 的对象语法十分直观–看着试分析像是CSS， 但是其实是一个javascript对象。css 属性名可以用驼峰式(camelCase) 或 短横线分割（kebab-case,记得用单引号括起来）来命名：

<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',
        font-size: 13px
    }
}
// 同样的 对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

 
    <div v-bind:style="[baseStyle, overridingStyles]"></div>
    

自动添加前缀

v-bind:style 使用需要添加浏览器引擎前缀的css 属性时， 如transform，vue.js 会自动侦测并添加相应的前缀。

多重值

从2.3.0 起，可以为style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

 

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。