在 Vue 中，綁定樣式分為 Binding HTML Classes 或是 Binding Inline Styles。
通常為了分離 HTML 和 CSS，不會使用 Binding Inline Styles，所以這邊只介紹 Binding HTML Classes。

由於綁定 HTML Classes 會使用到 Vue Directives 的 v-bind，且 Vue.js 針對 v-bind 使用在 class 和 style 上有特別增加功能，就是說其表達式的結果可以為 String, Object, Array。

v-bind

先看個簡單的 v-bind 範例，可以綁定 img 的 src 為 imageSrc，當修改圖片路徑時，圖片會更新。
而 v-bind:src 可以簡寫為 :src。

附上 jsfiddle https://jsfiddle.net/hunterliu/zq1v3e2k/1/

<div id="app">
  <!-- bind an attribute -->
  <img v-bind:src="imageSrc">
  <!-- shorthand -->
  <img :src="imageSrc">
</div>

var vm = new Vue({
  el: '#app',
  data: {
    imageSrc: 'http://via.placeholder.com/350x150'
  }
})

vm.$data.imageSrc = 'http://via.placeholder.com/350x150/1'

Binding HTML Classes

Vue 可以透過傳入物件或陣列動態的切換 class。

Object Syntax

附上 fiddle https://jsfiddle.net/hunterliu/sne6f5zc/3/

Array Syntax

簡單改寫上面的範例

附上 fiddle https://jsfiddle.net/hunterliu/auyrptfv/

參考資料

• Vue.js: Class and Style Bindings