05《Vue 入門教程》Vue 動態樣式綁定

本小節我們將介紹 Vue 中如何動態綁定樣式。包括 Class 的綁定、內聯樣式 Style 的綁定。掌握樣式綁定的多種形式是其中的重點難點。同學們可以在學完本小節之後對樣式的綁定方式加以總結，再通過反復的練習來加深印象。

通過 v-bind 指令給 DOM 元素動態綁定 Class 和 Style，壹般用於根據不同數據狀態切換元素樣式的場景下。

我們可以通過數組和對象的兩種形式綁定元素的 Class。

通過傳給 v-bind:class 壹個對象，以動態地切換 class：

代碼解釋： 上面的語法表示 show 這個 class 存在與否將取決於數據屬性 isShow 是否為真值。

具體示例：

實例演示

"運行案例" 可查看在線運行效果

代碼解釋： HTML 代碼第 2 行，我們給 p 綁定樣式，當 isHide 為真值時，其渲染結果為，否則。打開控制臺，修改 vm.isHide 的值可以動態改變頁面效果。

此外， v-bind:class 指令也可以與普通的 class 屬性***存。語法：

當有如下模板:

和如下 data：

結果渲染為：

代碼解釋： 當 isShow 或者 hasError 變化時，class 列表將相應地更新。

例如，如果 hasError 的值為 true ， isShow 的值為 true ，class 列表將變為 "defaultClass show text-danger" 。

例如，如果 hasError 的值為 true ， isShow 的值為 false ，class 列表將變為 "defaultClass text-danger" 。

在之前介紹的案例中，我們將綁定的數據對象內聯定義在模板裏，這樣顯得比較繁瑣。其實，我們可以統壹定義在壹個 classObject 中：

實例演示

"運行案例" 可查看在線運行效果

結果渲染為：

代碼解釋： HTML 代碼中，我們首先給 p 壹個固定樣式 defaultClass，然後通過 classObject 給 p 綁定樣式。 JS 代碼第 6-9 行，我們定義了數據 classObject，它有兩個屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最後頁面渲染的效果是：

我們也可以在這裏綁定壹個返回對象的計算屬性。這是壹個常用且強大的模式：

實例演示

"運行案例" 可查看在線運行效果

結果渲染為：

代碼解釋： HTML 代碼中，我們通過 classObject 給 p 綁定樣式。 JS 代碼第 6-11 行，我們定義了計算屬性 classObject，它返回壹個對象，該對象有兩個屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最後頁面渲染的效果是：

我們可以把壹個數組傳給 v-bind:class ，以應用壹個 class 列表：

實例演示

運行案例點擊 "運行案例" 可查看在線運行效果

渲染為：

代碼解釋： 在 HTML 代碼中，我們通過數組給 p 綁定樣式，數組中有 classA 和 classB 兩個值。在 JS 代碼第 6-7 行定義了 classA 和 classB 兩個字符串，它的格式和元素 class 的格式相同，不同的樣式類之間以空格相隔。

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

這樣寫將始終添加 classB 的樣式，但是只有在 isShow 為真時才添加 showClass 。

不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象的形式來表達數組中的某壹項：

代碼解釋： 在 HTML 中，p 綁定壹個樣式數組，數組第壹項是壹個對象表達式 { showClass: isShow }。當 isShow 為 true 時樣式最終綁定為：；當 isShow 為 false 時樣式最終綁定為：；

和 Class 的綁定壹樣，Style 的綁定同樣可以通過數組和對象的兩種形式。

v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是壹個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

實例演示