vue.js的官網寫的很好哈，我就是為了詳細認真的學習一遍，所以才總結的，比較推薦看官網：vue.js

操作元素的 class 列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表示式計算出字串結果即可。不過，字串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表示式結果的型別除了字串之外，還可以是物件或陣列

一、class的繫結

語法1：v-bind:class="{類名:表示式}"

• 表示式計算結果為true時，新增這個class，表示式計算結果為false時，不新增這個class

<li
                v-bind:class="{completed:item.isComplete}"
></li>

• v-bind:class指令也可以與普通的class屬性共存

<li class="todo"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
></li>

還可以在物件中新增多個屬性，動態新增多個class

<li class="todo"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
></li>
 

語法2：陣列語法：

我們可以把一個數組傳給v-bind:class,以應用一個class列表：

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

data: {
  activeClass: 'active',
  bgClass: 'bg'
}

陣列中的元素也可以是三元表示式

二、繫結內聯樣式

語法1：物件語法：v-bind:style="{css屬性名:表示式}"

注意：css屬性名可以用駝峰式或短橫線分割（如果是用短橫線分割的方式是，記得要用單引號括起來）

<p v-bind:style="{fontSize:fontSize+'px'}">你的名字是{{list.name}}</p>
 

<p v-bind:style="{'font-size':fontSize+'px'}">你的名字是{{list.name}}</p>

語法2：直接繫結一個物件：v-bind:style="樣式物件"

<div id="wrap">
    <p v-bind:style="font">你的名字是{{list.name}}</p>
</div>
<script>
    var list = {
        name:"donna",
        age:20
    }
    var vm = new Vue({
        el:"#wrap",
        data:{
            list,
            font:{
                fontSize:'40px'
            }
        }
    });
</script>

物件語法常常結合物件的計算屬性使用

語法3：陣列語法：v-bind:style="[樣式物件,...]"

<p v-bind:style="[fontObj,colorObj]">你的名字是{{list.name}}</p>

自動新增字首：

當v-bing:style使用需要新增瀏覽器引擎字首的css屬性時，例如transform，Vue.js會自動偵測並新增響應的字首

從 2.3.0 起你可以為 style 繫結中的屬性提供一個包含多個值的陣列，常用於提供多個帶字首的值，例如：

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