Vue3 动态类名写法详解 - 对象语法、数组语法、计算属性

在 Vue3 中，可以使用动态类名的方式有多种，以下是其中几种常见的方式：

1. 使用对象语法： 在模板中，可以使用 v-bind 指令将一个对象作为动态类名的绑定值，对象的属性即为类名，属性值为布尔值，用于控制类名是否生效。示例代码如下：

<template>
  <div :class="{ active: isActive, 'text-bold': isBold }">Dynamic class name</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isBold: false
    }
  }
}
</script>

2. 使用数组语法： 在模板中，可以使用数组作为动态类名的绑定值，数组中的每一项即为一个类名。示例代码如下：

<template>
  <div :class="[activeClass, 'text-bold']">Dynamic class name</div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'active'
    }
  }
}
</script>

3. 使用计算属性： 在模板中，可以使用计算属性来动态计算类名。示例代码如下：

<template>
  <div :class="computedClass">Dynamic class name</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isBold: false
    }
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive,
        'text-bold': this.isBold
      }
    }
  }
}
</script>

以上是几种常见的动态类名的写法，根据实际需求和场景选择适合的方式即可。