vue的动态class怎么写

在 Vue 中，可以使用 v-bind 指令和对象语法来动态绑定 class。

例如，我们可以通过计算属性来动态生成一个 class：

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

<script>
export default {
  data() {
    return {
      isActive: true,
      fontSize: '20px'
    }
  },
  computed: {
    computedClass() {
      return {
        'active': this.isActive,
        'font-size': this.fontSize
      }
    }
  }
}
</script>

在上面的例子中，我们在 data 中定义了 isActive 和 fontSize 两个属性，然后在 computed 中定义了 computedClass 计算属性，该计算属性返回一个对象，对象中的属性名表示 class 名称，属性值表示该 class 是否生效。例如，当 isActive 为 true 时，'active' class 生效，当 fontSize 为 '20px' 时，'font-size' class 生效。最终，我们可以将 computedClass 对象作为 v-bind:class 的参数，动态绑定 class。

除了对象语法外，还可以使用数组语法来动态绑定多个 class：

<template>
  <div :class="[classA, classB]"></div>
</template>

<script>
export default {
  data() {
    return {
      classA: 'class-a',
      classB: 'class-b'
    }
  }
}
</script>

在上面的例子中，我们在 data 中定义了 classA 和 classB 两个属性，然后将它们作为数组元素传递给 v-bind:class，即可动态绑定多个 class。

需要注意的是，当使用数组语法时，每个数组元素都必须是一个字符串，不能是对象。如果需要动态绑定对象类型的 class，仍然需要使用对象语法。