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 数组里直接定义样式，若是样式名是以 - 链接的，须要写成驼峰的形式，最终结果以下：