操作元素的class列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表示式計算出字串結果即可。
表示式結果的型別除了字串之外，還可以是物件或陣列。
繫結HTML的class
物件語法
我們可以傳給 v-bind:class 一個物件，以動態地切換 class
上圖的語法表示 Font 這個 class 存在與否將取決於資料屬性 isFont 的值。
當然也可以傳入更多屬性來動態切換多個class
此外，v-bind:class 指令也可以與普通的 class 屬性共存。
當然繫結的資料也不必定義在模板裡，這樣也是可以的，渲染的結果和上面一樣
陣列語法
我們可以把一個陣列傳給 v-bind:class，以應用一個 class 列表：
當然如果想根據條件切換列表中的 class，可以用三元表示式：
也可以這樣<div class="background" v-bind:class="[isActive?Font:"",col]">測試文字1</div>
這樣寫將始終新增 col，但是隻有在 isActive 是 truthy 時才新增 Font。
不過，當有多個條件 class 時這樣寫有些繁瑣。所以在陣列語法中也可以使用物件語法：
<div class="background" v-bind:class="[{Font:isActive},col]">測試文字1</div>
複製程式碼繫結內聯樣式
物件語法
v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件。
直接繫結到一個樣式物件通常更好，這會讓模板更清晰：
陣列語法
v-bind:style 的陣列語法也可以將多個樣式物件應用到同一個元素上：
自動新增字首
當 v-bind:style`` 使用需要新增瀏覽器引擎字首的 CSS 屬性時，如 transform，則 Vue.js 會自動偵測並新增相應的字首。
多重性
你可以為 style 繫結中的屬性提供一個包含多個值的陣列，常用於提供多個帶字首的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
複製程式碼