Vue 動態繫結 class 的方法

:class=" 'classname' " /* 如上示例是最簡單的動態繫結，但好像沒有任何意義，和不動態繫結的結果是一樣的。 */

:class="" /* 當條件表示式為true時，則繫結 */

:class=" 條件表示式 ? 'classname1' : 'classname2' " /* 當條件表示式為 true 時繫結 'classname1' 否則繫結 'classname2' */

在實際的開發中，繫結的class會更多，這時候需要多種方式混合繫結

:class=" [ , (條件表示式2 ? 'classname2':'classname3') ] " /* 如果有多個類名需要繫結且判斷條件各不相同時，則需要使用混合方式，通過陣列中包含多個項來處理 */

如果僅是上示例的需求，也可以寫成如下（物件多個屬性）方式：

:class=" " /* 相比較而言，用混合模式會相對精簡 */

/* 計算屬性繫結 */
:class="計算屬性名"
/* 函式繫結 */
:class="方法名()"
在 計算屬性 與 函式 中 return 正確的 class 字串即可

vue.js 的動態繫結 class 的方式基本是以上幾種，vue 還有一種更強大的處理就是如是你的class真的超多的話，可以繫結乙個物件或者乙個陣列，以減少在 dom 結構中寫入過長的屬性影響可讀性及美觀性。

舉一反三，繫結多個 style 值也是如此的。本篇文章就不再敘述。相信有不少的讀者也為繫結多個不同判斷條件的 class 煩惱過，本篇文章對大家有所幫助。