Vue3--类和样式

绑定 class 对象语法

可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class：

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

  上面的语法表示 active 这个 class 存在与否将取决于数据属性isActive 的布尔值。
  可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class共存。

代码模板1

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

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

最终渲染结果为:

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

代码模板2

绑定的数据对象不是必须内联定义在模板里，也可以直接由Vue提供，如下所示

<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'
    }
  }
}

代码模板3–数组语法

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

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

data() {  return {    activeClass: 'active',    errorClass: 'text-danger'  }}

渲染的结果为:

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

将对象和数组传递给class的区别:

对象的键是class字符串，值用来决定是否启用该键
数组的元素是一个外部对象的键，键的值才是最终的class字符串

参考链接

https://www.liujiangblog.com/course/vue3/