我們可以傳給 :class ( v-bind:class 的簡寫) 壹個對象，以動態地切換 class：
上面的語法表示 active 這個 class 存在與否將取決於 data property isActive 的 truthiness 。
妳可以在對象中傳入更多字段來動態切換多個 class。此外， :class 指令也可以與普通的 class attribute ***存。當有如下模板：
和如下 data：
渲染的結果為：
當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true ，class 列表將變為 "static active text-danger" 。
綁定的數據對象不必內聯定義在模板裏：
渲染的結果和上面壹樣。我們也可以在這裏綁定壹個返回對象的 計算屬性 。這是壹個常用且強大的模式：
我們可以把壹個數組傳給 :class ，以應用壹個 class 列表：
渲染的結果為：
如果妳想根據條件切換列表中的 class，可以使用三元表達式：
這樣寫將始終添加 errorClass ，但是只有在 isActive 為 truthy [1] 時才添加 activeClass 。
不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：
當妳在帶有單個根元素的自定義組件上使用 class attribute 時，這些 class 將被添加到該元素中。此元素上的現有 class 將不會被覆蓋。
例如，如果妳聲明了這個組件：
然後在使用它的時候添加壹些 class：
HTML 將被渲染為：
對於帶數據綁定 class 也同樣適用：
當 isActive 為 truthy [1] 時，HTML 將被渲染成為：
如果妳的組件有多個根元素，妳需要定義哪些部分將接收這個 class。可以使用 $attrs 組件 property 執行此操作：
妳可以在 非 Prop 的 Attribute 小節了解更多關於組件屬性繼承的信息。
:style 的對象語法十分直觀——看著非常像 CSS，但其實是壹個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：
直接綁定到壹個樣式對象通常更好，這會讓模板更清晰：
同樣的，對象語法常常結合返回對象的計算屬性使用。
:style 的數組語法可以將多個樣式對象應用到同壹個元素上：
在 :style 中使用需要壹個 vendor prefix (瀏覽器引擎前綴) 的 CSS property 時，Vue 將自動偵測並添加相應的前綴。Vue 是通過運行時檢測來確定哪些樣式的 property 是被當前瀏覽器支持的。如果瀏覽器不支持某個 property，Vue 會進行多次測試以找到支持它的前綴。
可以為 style 綁定中的 property 提供壹個包含多個值的數組，常用於提供多個帶前綴的值，例如：
這樣寫只會渲染數組中最後壹個被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那麽就只會渲染 display: flex