我們可以傳給v-bind:class乙個物件，以動態地切換 class：
上面的語法表示active這個 class 存在與否將取決於資料屬性isactive的 truthiness。
你可以在物件中傳入更多屬性來動態切換多個 class。此外，v-bind:class指令也可以與普通的 class 屬性共存。當有如下模板:
和如下 data：
data:
結果渲染為：
當isactive或者haserror變化時，class 列表將相應地更新。例如，如果haserror的值為true，class 列表將變為"static active text-danger"。
繫結的資料物件不必內聯定義在模板裡：
data:}
渲染的結果和上面一樣。我們也可以在這裡繫結乙個返回物件的計算屬性。這是乙個常用且強大的模式：
data: ,computed:
}}
我們可以把乙個陣列傳給v-bind:class，以應用乙個 class 列表：
data:
渲染為：
如果你也想根據條件切換列表中的 class，可以用三元表示式：
這樣寫將始終新增errorclass，但是只有在isactive是 truthy[1] 時才新增activeclass。
不過，當有多個條件 class 時這樣寫有些繁瑣。所以在陣列語法中也可以使用物件語法：
vue繫結class的幾種方式
1.物件語法 在物件上繫結class屬性，來控制class 的幾種狀態。div script newvue script body 2.陣列語法 將class的屬性值組成乙個陣列來控制class的各種屬性，當class 需要有多個屬性的時候就要用陣列語法來繫結其中的值，這樣做的好處是有利於動態修改c...
vue動態繫結class的幾種方式 Vue
物件方法 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 也可以把後面繫結的物件寫在乙個變數放在data裡面，可以變成下面這樣 class classobject data 第三種 使用computed屬性 class classobject da...
vue動態繫結class的幾種方式
物件方法 最簡單的繫結 這裡的active加不加單引號都可以，以下也一樣都能渲染 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 也可以把後面繫結的物件寫在乙個變數放在data裡面，可以變成下面這樣 class classobject data 第...