之前的文章我们已经对 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 标签的样式,最终结果如下:

Vue 进阶之路(四)-LMLPHP

上面的 :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 类名,结果如下:

Vue 进阶之路(四)-LMLPHP

以上方法我们是通过 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 一样的效果。结果如下:

Vue 进阶之路(四)-LMLPHP

 那我们可不可以像 :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 数组里直接定义样式,如果样式名是以 - 连接的,需要写成驼峰的形式,最终结果如下:

Vue 进阶之路(四)-LMLPHP

04-19 13:17