操作class和內(nèi)聯(lián)樣式是一個(gè)常見需求， 都是attribute，我們可以使用v-bind處理， 只需要通過表達(dá)式計(jì)算出字符串結(jié)果即可。vue針對(duì)class和style做了增強(qiáng)，表達(dá)式結(jié)果類型除了字符串之外，還可以是對(duì)象或數(shù)組

對(duì)象語法

<div v-bind:class="{ active: isActive }"></div> 

active 這個(gè)class存在與否取決于 property isActive的true還是false，可以在對(duì)象中傳入更多的字段來切換多個(gè)class，此外 v-bind：class指令可以與普通的class attribute共存， 如下：

    <div class = 'static' v-bind:class="{ active: isActive, 'text-danger':hasError }"></div>

<!-- 如下的data -->
data: {
    isActive: true,
    hasError: false
}

渲染結(jié)果：

  <div class="static active"></div>

isActive和hasError變化時(shí)， class列表將相應(yīng)的更新。如果hasError的值如果變?yōu)閠rue，class的列表將變?yōu)? “static active text-danger"

綁定的數(shù)據(jù)對(duì)象不必內(nèi)聯(lián)定義在模板里：

<div v-bind:class="classObject"></div>

<script> 
    data: {
        classObject: {
            active: true,
            'text-danger': false
        }
    }
</script>

效果跟上面的一樣。 也可以綁定一個(gè)返回對(duì)象的計(jì)算屬性，這是一個(gè)常用且強(qiáng)大的模式

<div v-bind:class="classObject"> </div>
<script>
data: {
    isActive: true,
    hasError: false
}

computed: {
    classObject: function() {
        return { 
            active: this.isActive && !this.error，
            'text-danger': this.error && this.error.type==='fatal'
        }
    }
}
</script>

數(shù)組語法

可以把數(shù)組傳遞給 v-bind:class，應(yīng)用一個(gè)class列表

    <div v-bind:class="[ activeClass, errorClass]"></div>

<script>
    data : {
        activeClass: 'active',
        errorClass: 'text-danger'
    }
</script>

<!-- 渲染結(jié)果 -->
<div class="active text-danger"></div>

如果根據(jù)條件切換，可以使用三元表達(dá)式

<div v-bind:class="[isActive?activeClass: '', errorClass]"> </div>

當(dāng)class控制 較為繁瑣是， 可以在數(shù)組語法中使用對(duì)象語法

<div v-bind:clas="[{active: isActive}, errorClass]"></div>

用在組件上

當(dāng)在一個(gè)自定義組件上使用class property時(shí)， 這些class將被添加到該組件的根元素上面。這個(gè)元素上已經(jīng)存在的clas不會(huì)被覆蓋

實(shí)例如下：

Vue.component('my-component', {
    template: '<p class="foo bar">Hi</p>'
})

<!-- 在使用組件時(shí)，添加一些class -->
<my-component class='baz boo'> </my-component>

<!-- html將被渲染為 -->
<p class="foo bar baz boo" >Hi</p>

<!-- 帶數(shù)據(jù)綁定clas也同樣適用 -->
<my-component v-bind:class="{active: isActive}"></my-component>

<!-- 當(dāng)isActive = true時(shí) -->
<p class="foo bar active" ></p>

綁定內(nèi)聯(lián)樣式

v-bind:style 的對(duì)象語法十分直觀， 非常像css，其實(shí)時(shí)一個(gè)javaScript對(duì)象。

<div v-bind:style="{color: activeColor, fond: fontSize + 'px'}"></div>

<script> 
data: {
    activeColor:"red",
    fondSize: 30    
}
</script>

直接綁定到一個(gè)樣式對(duì)象通常更好， 讓木桿更加清晰

<div v-bind:style="styleObject"></div>

<script>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
 </script>

數(shù)組語法

v-bind:style的數(shù)組語法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上：

<div v-bind:style="[bassStyles, overridingSytyles]">

自動(dòng)添加前綴

當(dāng)v-bind:style使用需要添加瀏覽器引擎前綴css property時(shí)，vue會(huì)自動(dòng)偵測(cè)，并添加相應(yīng)去前綴

多重值

2.3.0起，可以為 style綁定中的property提供一個(gè)包含多個(gè)值的數(shù)組，常用于提供多個(gè)帶前綴的值，例如

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

這樣子寫，置灰渲染數(shù)組中最后一個(gè)瀏覽器支持的值。此例中，如果瀏覽器支持不帶瀏覽器淺醉的flexbox，那么渲染結(jié)果為
display: flex