繫結 HTML Class物件語法我們可以傳給 v-bind:class 一個物件，以動態地切換 class 。

上面的語法表示 classactive 的更新將取決於資料屬性 isActive 是否為真值 。我們也可以在物件中傳入更多屬性用來動態切換多個 class 。此外， v-bind:class 指令可以與普通的 class 屬性共存。如下模板:如下 data:data: { isActive: true, hasError: false}渲染為:當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true ， class列表將變為 "static active text-danger"。你也可以直接繫結資料裡的一個物件：data: { classObject: { active: true, "text-danger": false }}渲染的結果和上面一樣。我們也可以在這裡繫結返回物件的計算屬性。這是一個常用且強大的模式：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 列表：data: { activeClass: "active", errorClass: "text-danger"}渲染為:如果你也想根據條件切換列表中的 class ，可以用三元表示式：此例始終新增 errorClass ，但是隻有在 isActive 是 true 時新增 activeClass 。不過，當有多個條件 class 時這樣寫有些繁瑣。可以在陣列語法中使用物件語法：