之前的文章我們已經對 vue 有了初步認識，這篇文章我們通過一個例子說一下 vue 的樣式綁定。
現在我們想要是想這樣一個需求，頁面上有個單詞，當我們點擊它的時候顏色變為紅色，再點擊一次變為原來的顏色。按照以往的思路我們需要根據 js 找到這個 DOM 然后對其進行樣式上的修改，那么在 vue 中該如何實現呢？我們來看下面的代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7 <style> 8 .red { 9 color: red; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="app"> 15 <p 16 :class="{red : active}" 17 @click="handleClick" 18 >{{title}}</p> 19 </div> 20 <script> 21 var app = new Vue({ 22 el: '#app', 23 data: { 24 title: "hello world", 25 active: false 26 }, 27 methods: { 28 handleClick() { 29 console.log("active 更改之前",this.active); 30 this.active = !this.active; 31 console.log("active 更改之后",this.active); 32 } 33 } 34 }) 35 </script> 36 </body> 37 </html>
在上面的代碼中我們我們在 data 里定義了一個 active 的數據，設置為 false，在 HTML 代碼中我們定義了一個 p 標簽，標簽內通過 :class 將其類名與 data 里的數據 active 建立聯系，通過 @click 將其與 methods 里的 handleClick() 方法建立聯系。
之前我們提到，在 vue 語法內是允許寫 js 邏輯代碼的，所以我們在 p 標簽的 :class 內寫了一個 {red: active} 的表達式，意思是當 active 時 red 成立，結合 data 里面的 active：false 可以得知，當 active 為 false 時 class=" "，當 active 為 true 時 class="red"; 然后我們在 <head> 的 <style> 里寫了一個 .red 的樣式，定義為 color：red; 這樣來控制 p 標簽的顏色樣式。
我們在 methods 的屬性了定義了一個 handleClick() 方法，當 p 標簽被點擊時觸發，將 data 數據里 active 在 true 和 false 之間切換。
根據上面的操作，我們就可以不必操作 DOM 來控制 p 標簽的樣式，最終結果如下：
上面的 :class 的方法顯然能夠完成我們想要的工作，但是如果我們想要 p 標簽有多個 class 類名該怎么辦呢？如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7 <style> 8 .red { 9 color: red; 10 } 11 .font-size{ 12 font-size: 30px; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="app"> 18 <p 19 :id="[red,fontSize]" 20 @click="handleClick" 21 >{{title}}</p> 22 </div> 23 <script> 24 var app = new Vue({ 25 el: '#app', 26 data: { 27 title: "hello world", 28 red: "", 29 fontSize: "font-size" 30 }, 31 methods: { 32 handleClick() { 33 console.log("執行前 red 數據",this.red); 34 this.red = this.red === "red" ? "" : "red"; 35 console.log("執行后 red 數據",this.red); 36 } 37 } 38 }) 39 </script> 40 </body> 41 </html>
上面的代碼中我們將 :class 置為了一個數組，這樣就可以在數組內添加多個 class 類名了，如圖我們添加了兩個類名 .red 和 fontSize，並在 data 數據內對他們分別進行了定義，我們依據通過 handleClick() 方法來更改 .red 的樣式，這樣就可以到達切換 p 標簽的 style 樣式和實現多個 class 類名，結果如下：
以上方法我們是通過 class 類名來控制 HTML 的樣式綁定，那我們是否可以通過 style 樣式來直接控制呢？看以下代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p 11 :style="styleObj" 12 @click="handleClick" 13 >{{title}}</p> 14 </div> 15 <script> 16 var app = new Vue({ 17 el: '#app', 18 data: { 19 title: "hello world", 20 styleObj: { 21 color: "black" 22 } 23 }, 24 methods: { 25 handleClick() { 26 console.log("執行前 styleObj.color 數據", this.styleObj.color); 27 this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"; 28 console.log("執行后 styleObj.color 數據", this.styleObj.color); 29 } 30 } 31 }) 32 </script> 33 </body> 34 </html>
以上代碼我們將樣式直接定義在了 :style 里面，然后在 data 數據里對 :style 定義的 styleObj 進行樣式書寫，在通過 handleClick() 方法對 styleObj 里的 color 樣式進行修改，這樣也能達到和 :class 一樣的效果。結果如下：
那我們可不可以像 :class 那樣定義數組的形式定義 :style 呢，答案是可以的，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p 11 :style="[styleObj, {fontSize:'30px'}]" 12 @click="handleClick" 13 >{{title}}</p> 14 </div> 15 <script> 16 var app = new Vue({ 17 el: '#app', 18 data: { 19 title: "hello world", 20 styleObj: { 21 color: "black" 22 } 23 }, 24 methods: { 25 handleClick() { 26 console.log("執行前 styleObj.color 數據", this.styleObj.color); 27 this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"; 28 console.log("執行后 styleObj.color 數據", this.styleObj.color); 29 } 30 } 31 }) 32 </script> 33 </body> 34 </html>
需要注意的是如果我們在 :style 數組里直接定義樣式，如果樣式名是以 - 連接的，需要寫成駝峰的形式，最終結果如下：
