Vue3手册译稿 - 基础 - Class和Style绑定

还有一个数据绑定就是控制元素的样式表或内联样式。因为它们都是属性，所以我们可以通过v-bind来处理：使用表达运算得到一个最终的字符串。但是字符串拼接是容易混乱和出错的。因为这个原因，Vue在使用v-bind绑定class和style时提供了增强方法。除了字符串，表达式同时也可能运算得到对象和数组。

绑定 HTML Classes

对象语法

我们可以给:class（v-bind:class的缩写）传递一个对象用来动态控制元素的样式：

<div :class="{ active: isActive }"></div>

这段意思是这个div的样式是否为active取决于布尔值isActive是否为真。你可以在元素上写上多个字段来使用元素有多个样式。另外:class可以与静态的class同时存在。看下面的模板：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

使用下面的数据：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

最终可能渲染为：

<div class="static active"></div>

isActive和hasError更新，元素的样式也随之更新。比如hasError变更为true，则最终渲染为：

<div class="static active text-danger"></div>

对象绑定不能是内联样式：

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

渲染结果是一样的。我们同时也可以绑定一个返回对象的计算属性。这是比较常用且强大的方法：

<div :class="classObject"></div>

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

我们可以传递一个数组给:class，这样元素就可以有一个样式列表：

<div :class="[activeClass, errorClass]"></div>

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
0

渲染结果：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
1

我们也可以根据条件控制样式是否包含在样式列表中，可以使用三元表达式：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
2

errorClass始终存在，activeClass则取决于isActive是否为真。

但如果有多个条件判断的话就会显得有点繁琐，这就是为什么要使用数组语法：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
3

组件样式

这个章节假设你已经了解组件了，如果有问题请先跳过，学习组件后来来学习。

如果你将class属性应用到只有一个根元素的定制组件上，样式将被加到这个根元素上。根元素上的样式将不会被覆盖。

例如，你这样声明了一个组件：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
4

使用时又添加了一个结样式：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
5

渲染结果如下：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
6

样式绑定也是一样：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
7

如果isActive为真，则渲染的HTML为：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
8

如果你的组件有多个根元素，你需要指定哪个根元素会使用该样式。你可以使用组件属性$attrs来完成(定义组件时用)：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
9

data() {
  return {
    isActive: true,
    hasError: false
  }
}
0

你可以通过非继承属性章节来了解更多组件样式。

绑定内联样式

对象语法

对象语法直接使用:style。除了是JavaScript对象以外，其他跟CSS都很像。样式名称，你可以使用驼峰命名或土耳其命名（短横线分隔）：

data() {
  return {
    isActive: true,
    hasError: false
  }
}
1

data() {
  return {
    isActive: true,
    hasError: false
  }
}
2

直接绑定样式对象有时候也不失为一个好的选择：

data() {
  return {
    isActive: true,
    hasError: false
  }
}
3

data() {
  return {
    isActive: true,
    hasError: false
  }
}
4

对象语法会结合返回对象的计算属性一起使用。

数组语法

:style的数组语法允许在一个元素上绑定多个样式。

data() {
  return {
    isActive: true,
    hasError: false
  }
}
5

自动前缀

如果你看到:style中一个样式需要浏览器前缀，例如：transform，Vue会自动检测当前浏览器并添加正确的前缀。

多值

你可以添加含有多样式（自动前缀）的数组到:style中，例如：

data() {
  return {
    isActive: true,
    hasError: false
  }
}
6

只会渲染最后一个当前浏览器支持的样式。在这个示例中，只会渲染display:flex输出非自动前缀版本流式布局到浏览器。