既然v-bind可以動態綁定標簽的屬性，那么也可以用v-bind來處理class和style，只需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在 v-bind 用于 class 和 style 時， Vue.js 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組

綁定 HTML Class：

對象語法：

我們可以傳給 v-bind:class 一個對象，以動態地切換 class ，對象的屬性名就是要給標簽添加的類名，而決定類是否要顯示的則是鍵值的真假，這里鍵值既可以是表達式也可以是data中的數據

上面的語法表示 classactive 的更新將取決于數據屬性 isActive 是否為真值

這里如果動態計算函數currentInde的返回結果等于index的值，就會顯示出類current

我們也可以在對象中傳入更多屬性用來動態切換多個 class 。此外， v-bind:class 指令可以與普通的 class 屬性共存

如下 data:

渲染為:

你也可以直接綁定數據里的一個對象：

數組語法：

我們可以把一個數組傳給 v-bind:class ，以應用一個 class 列表，數組的值并不是要添加到標簽中的，而是其在data中對應的值才是真正要添加到DOM中的

渲染為:

如果你也想根據條件切換列表中的 class ，可以用三元表達式：

此例始終添加 errorClass ，但是只有在 isActive 是 true 時添加 activeClass

不過，當有多個條件 class 時這樣寫有些繁瑣。可以在數組語法中使用對象語法

用在組件上：

當你在一個定制的組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋

聲明組件的一種方式是通過”Vue.component()”

例如，如果你聲明了這個組件:

然后在使用它的時候添加一些類

HTML 最終將被渲染成為

同樣的適用于綁定 HTML class

當 isActive 為 true 的時候，HTML 將被渲染成為

綁定內聯樣式：

對象語法：

v-bind:style 的對象語法十分直觀——看著非常像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）

直接綁定到一個樣式對象通常更好，讓模板更清晰

數組語法：

v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue基础之Class和Style绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。