这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！
本文是关于Vue中的属性绑定：绑定class和内联样式style
看文本篇，你将会对v-bind绑定class和style有个清晰的认识
本文目录结构如下：
基本介绍
此处分4小点来讲：
1. 可以使用v-bind来绑定元素属性
任何属性都可以通过v-bind来绑定，比如
<a :href="url">click me</a>
<img :src="imgsrc">
上面代码中，通过v-bind分别绑定了a标签的href属性和img的src属性
2. class和style都属于元素的属性，所以可以使用v-bind来绑定
可以像绑定其他属性那样绑定class和style
<a :href="url" :class="aaa" :style="bbb">click me</a>
上面代码中，绑定的class和style属性的最终值，是后面表达式的结果
3. 一般来说，class和style对应的值就是表达式计算出来的字符串
比如，最终添加到class上的是a
data() {
return {
aaa: 'a'
}
}
4. 但是vue做了增强，表达式结果除了字符串，还可以是对象或数组
这点后面会详细讲到
绑定Class
此处分3小点来讲：
1. 对象语法
可以传给:class一个对象，以动态地切换 class
比如下代码，active这个class是否存在取决于isActive的真值
<a :class="{active: isActive}">click me</a>
可以在对象中传入更多字段来动态切换多个class
<a :class="{active: isActive， danger: isDanger}">click me</a>
另外:class指令也可以与普通的 class 属性共存，如下
<a class = 'aaa' :class="{active: isActive， danger: isDanger}">click me</a>
绑定的数据对象不必内联定义在模板里，可以绑定为一个返回对象的属性或者计算属性
data() {
return {
isActive: true,
isDanger: 'danger'
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.danger
}
}
}
2. 数组语法
可以把一个数组传给:class，表示应用一个class 列表
如下，传递了一个数组，最终渲染出来的class的值其实就是a和b对应的值的组合
<div :class="[a, b]"></div>
数组中成员可以使用三元表达式，也可以使用对象语法，甚至可以混合在一起
<div :class="[{ active: isActive }, isImp ? imp : '']"></div>
3. 在组件上使用
模板中原本的class和在使用组件是添加的class会自动混合在一起，对于:class的情况一样适用
如果组件有多个根元素，你需要定义哪些部分将接收这个类，可以借助$attrs.class
绑定内联样式style
此处分4小点来讲：
1. 对象语法
跟写css很像就是写个对象，属性为css属性名，值为表达式的结果。但是更推荐的做法是，直接绑定到一个样式对象，好处：模板更清晰
<div :style="styleObj"></div>
data() {
return {
styleObj: {
color: 'red',
fontSize: '2em'
}
}
}
另外可以绑定为一个计算属性，计算属性返回的是一个样式对象
2. 数组语法
当绑定style传递的是个数组时，数组中的每一个成员都表示一个样式对象，他们最终都会应用到同一个元素上
<div :style="[a, b]"></div>
3. 多重值
可以为:style中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
4. 自动添加前缀
当使用一些需要添加前缀的css属性时，Vue 将自动侦测并添加相应的前缀
END~
以上就是绑定class和内联样式style的所有内容
如有问题，欢迎留言告知，感谢~
为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map
