这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

本文是关于Vue中的属性绑定：绑定class和内联样式style

看文本篇，你将会对v-bind绑定class和style有个清晰的认识

本文目录结构如下：

基本介绍

此处分4小点来讲：

1. 可以使用v-bind来绑定元素属性

任何属性都可以通过v-bind来绑定，比如

click me

上面代码中，通过v-bind分别绑定了a标签的href属性和img的src属性

2. class和style都属于元素的属性，所以可以使用v-bind来绑定

可以像绑定其他属性那样绑定class和style

click me

上面代码中，绑定的class和style属性的最终值，是后面表达式的结果

3. 一般来说，class和style对应的值就是表达式计算出来的字符串

比如，最终添加到class上的是a

data() {
  return {
    aaa: 'a'
  }
}

4. 但是vue做了增强，表达式结果除了字符串，还可以是对象或数组

这点后面会详细讲到

绑定Class

此处分3小点来讲：

1. 对象语法

可以传给:class一个对象，以动态地切换 class

比如下代码，active这个class是否存在取决于isActive的真值

click me

可以在对象中传入更多字段来动态切换多个class

click me

另外:class指令也可以与普通的 class 属性共存，如下

click me

绑定的数据对象不必内联定义在模板里，可以绑定为一个返回对象的属性或者计算属性

data() {
  return {
    isActive: true,
    isDanger: 'danger'
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.danger
    }
  }
}

2. 数组语法

可以把一个数组传给:class，表示应用一个class 列表

如下，传递了一个数组，最终渲染出来的class的值其实就是a和b对应的值的组合

数组中成员可以使用三元表达式，也可以使用对象语法，甚至可以混合在一起

3. 在组件上使用

模板中原本的class和在使用组件是添加的class会自动混合在一起，对于:class的情况一样适用

如果组件有多个根元素，你需要定义哪些部分将接收这个类，可以借助$attrs.class

绑定内联样式style

此处分4小点来讲：

1. 对象语法

跟写css很像就是写个对象，属性为css属性名，值为表达式的结果。但是更推荐的做法是，直接绑定到一个样式对象，好处：模板更清晰

data() {
  return {
    styleObj: {
      color: 'red',
      fontSize: '2em'
    }
  }
}

另外可以绑定为一个计算属性，计算属性返回的是一个样式对象

2. 数组语法

当绑定style传递的是个数组时，数组中的每一个成员都表示一个样式对象，他们最终都会应用到同一个元素上

3. 多重值

可以为:style中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

4. 自动添加前缀

当使用一些需要添加前缀的css属性时，Vue 将自动侦测并添加相应的前缀

END~

以上就是绑定class和内联样式style的所有内容

如有问题，欢迎留言告知，感谢~

为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map