Vue 從入門到進階之路（四）

時間 2019-11-29

標籤 vue 入門進階之路简体版

原文原文鏈接

以前的文章咱們已經對 vue 有了初步認識，這篇文章咱們經過一個例子說一下 vue 的樣式綁定。html

如今咱們想要是想這樣一個需求，頁面上有個單詞，當咱們點擊它的時候顏色變爲紅色，再點擊一次變爲原來的顏色。按照以往的思路咱們須要根據 js 找到這個 DOM 而後對其進行樣式上的修改，那麼在 vue 中該如何實現呢？咱們來看下面的代碼：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() 方法創建聯繫。npm

以前咱們提到，在 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 之間切換。app

根據上面的操做，咱們就能夠沒必要操做 DOM 來控制 p 標籤的樣式，最終結果以下：this

上面的 :class 的方法顯然可以完成咱們想要的工做，可是若是咱們想要 p 標籤有多個 class 類名該怎麼辦呢？以下：spa

 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 類名，結果以下：.net

以上方法咱們是經過 class 類名來控制 HTML 的樣式綁定，那咱們是否能夠經過 style 樣式來直接控制呢？看如下代碼：code

 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 同樣的效果。結果以下：cdn

那咱們可不能夠像 :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 數組裏直接定義樣式，若是樣式名是以 - 鏈接的，須要寫成駝峯的形式，最終結果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。