Vue 进阶之路（四） - 好文

之前的文章我们已经对 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 数组里直接定义样式，如果样式名是以 - 连接的，需要写成驼峰的形式，最终结果如下：

热门工具换一换