vue3 绑定Class (对象和数组语法）

官方文档    Class 与 Style 绑定 | Vue.js

对象语法

我们可以传给 :class (v-bind:class 的简写) 一个或多个对象，以动态地切换 class，:class 指令也可以与普通的 class 共存。当有如下模板：

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

<script>
data() {
  return {
    isActive: true,
    hasError: false
  }
}
</script>

渲染的结果为:

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

如果 hasError 的值为 true,渲染的结果改变

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

数组语法

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

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

<script>
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}
</script>

渲染的结果为

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

使用三元表达式:

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

数组语法中可以使用对象语法

<div :class="[{ active: isActive }, errorClass]"></div>