本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
如何让 CSS 只在当前组件中起作用？
[编号：vue_11]
🔗本阶段对应的“官方文档”阅读“Class 与 Style 绑定”章节
🚀需求：让下面的代码实现点击页面上的“hello qdywxs”可以切换颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 中的 Class 与 Style 绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>hello qdywxs</div>
</div>
<script>
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
之前我们使用 Vue 都是对数据进行操作，很难想象数据如何与样式进行绑定。因为 Vue 是“面向数据”而不再是直接操作 DOM 来编程了。
所以要使用 Vue 实现上面的需求，现在要来了解的是：某一个数据能够与样式相关联，当数据发生改变，样式就发生改变。
1 对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 中的 Class 与 Style 绑定</title>
<script src="./vue.js"></script>
<style>
.activated { /*
3️⃣当 div 上显示 activated 类名时（即 isActivated 为 true），
颜色变为红色；
*/
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
> <!-- 1️⃣-①：在 div 上使用 v-bind（即半角冒号 : ） 动态绑定一个 class；
1️⃣-②：让 class 与一个对象绑定；
❗️在 div 上绑定 class 对象整个意思是：这个 div 上有一个 class，
class 的名字起为 activated。而 activated 显示与否，取决于 data 中 isActivated
这个变量！ -->
<!-- 4️⃣在 div 上监听 click 事件，事件触发执行 handleDivClick；-->
hello qdywxs
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActivated: false // 2️⃣在 data 中定义 isActivated，默认为 false；
},
methods: {
handleDivClick() { // 5️⃣-①：在 methods 中定义 handleDivClick；
this.isActivated = !this.isActivated /*
5️⃣-②：对 this.isActivated 取反
（即若 this.isActivated 为 true，
则让它变为 false；若它为 false，
则变为 true）。
*/
}
}
})
</script>
</body>
</html>
保存后回到页面刷新，打开控制台并选中元素可以看到：
- 当页面上的“hello qdywxs”为黑色时，div 上没有
activated； - 点击后，div 上增加了
activated类名，且字符串变为红色； - 再次点击则移除了
activated，并恢复黑色。
:class="{activated: isActivated} 这就是 class 的对象绑定语法：借助 class 和一个对象的形式来让样式和数据进行绑定。
2 数组绑定
<div id="app">
<div @click="handleDivClick"
:class="[activated]"
> <!-- 1️⃣让 class 与 一个数组进行绑定；
❗️在 div 上绑定 class 数组整个意思是：div 上会显示一个 class，
它显示的 class 取决于变量 activated 里的内容！ -->
hello qdywxs
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activated: '' // 2️⃣在 data 中定义 activated，默认为空；
},
methods: {
handleDivClick() {
this.activated = this.activated === 'activated' ? '' : 'activated'
/*
3️⃣this.activated 是不是字符串 activated？ 如果是，让 this.activated 为空字符串；
如果不是，则为字符串 activated。
*/
}
}
})
</script>
保存后刷新网页可以看到，通过这种方式也实现了同样的效果：
:class="[activated]" 这就是 class 的数组绑定语法：数组中的内容代表一个变量，class 会显示这个变量的内容。
既然是数组，那么就还可以再增加变量。我们在代码中测试一下：
<div id="app">
<div @click="handleDivClick"
:class="[activated, activatedTwo]"
> <!-- 1️⃣在数组中添加一个变量 activatedTwo； -->
hello qdywxs
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activated: '',
activatedTwo: 'activated-two' // 2️⃣data 中的 activatedTwo 定义为 activated-two；
},
methods: {
handleDivClick() {
this.activated = this.activated === 'activated' ? '' : 'activated'
}
}
})
</script>
返回网页可以看到，当我们在 data 中给 activatedTwo 添加了默认值后，这个默认值会一直显示在 div 标签上：
❓除了用 class 来改变样式，还有没有变的方法来改变样式呢？
答：还可以用 style 来改变样式。
3 内联样式
3.1 内联样式的对象语法
<div id="app">
<div :style="styleObj" @click="handleDivClick">
<!-- 1️⃣div 上动态绑定 style；
❗️这整个意思是：div 上有一些样式，样式是一个对象 styleObj！ -->
<!-- 3️⃣-①：监听 click 事件，当它被点击时，执行 handleDivClick 方法；-->
hello qdywxs
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { /*
2️⃣
2️⃣-①：在 data 中定义样式的对象 styleObj；
*/
styleObj: { // 2️⃣-②：styleObj 对象中样式的写法与直接写 CSS 一样；
color: 'black' // ❗️注意：Vue 中都是数据，所以 black 要用引号包裹！
}
},
methods: {
handleDivClick() {
this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black';
/*
3️⃣-②：当 click 事件触发时，元素的 styleObj 对象的 color 是不是黑色？
如果是，让它变为红色；如果不是，让它变为黑色。
*/
}
}
})
</script>
保存后返回网页可以看到，我们使用内联样式的对象语法给 div 标签上添加了内联样式：
再次简述一下原理：
- 第一次进入页面时，
styleObj对应的颜色是black，所以 div 上的样式显示为黑色； - 第一次点击元素时，
this.styleObj.color等于black，所以this.styleObj.color会返回red； - 第二次点击时元素样式为红色，所以
this.styleObj.color返回black； - 因为每次数据发生改变，我们恰好又把样式与数据相关联
:style="styleObj"，所以页面的样式也会跟着发生改变。
3.2 内联样式的数组语法
内联样式的数组语法与 class 类似，非常简单：
<div :style="[styleObj]"
@click="handleDivClick"> <!-- ❗️直接把 styleObj 放入数组中！
当 style 后面跟了一个“数组”，它的意思是：这个 div 上显示的样式，
由数组中的对象所决定。 -->
hello qdywxs
</div>
保存返回网页可以发现，效果与刚才使用对象语法的一模一样：
既然同为“数组”，当然也可以再多加一些样式：
<div :style="[styleObj, {fontSize: '1.5em'}]"
@click="handleDivClick"> <!-- 1️⃣在数组中直接再添加一个对象 fontSize；
2️⃣这里的 fontSize 是一个 JS 对象。当它是一个对象时，
不能写为 font-size，只能写为 fontSize！
3️⃣fontSize 的值为 1.5em（当外面有双引号时，里面的用单引号，
注意不要用相同的引号）。 -->
hello qdywxs
</div>
返回页面查看，现在元素上不仅有颜色的样式，还有 font-size 的样式了：
🏆总结：无论是绑定 class 或是绑定 style，都可以通过“对象”或是“数组”的方式进行绑定。
两种方式用起来稍有不同，但只要跟着本文一起敲一次，就能找到一些感觉了。之后再通过不断的使用，我们就能熟练掌握这些语法！
祝好，qdywxs ♥ you！
