vue---使用Class

在 Vue 中，你可以使用 `v-bind:class` 指令或者 `:class` 缩写来动态绑定类名。例如：

<template>
  <div :class="{'active': isActive, 'disabled': isDisabled}">
    This is a div element.
  </div>
</template>

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

上面的代码中，`isActive` 和 `isDisabled` 是在 `data` 中定义的变量，它们用来控制 `active` 和 `disabled` 这两个类名是否需要添加到 `div` 元素上。

另外，你也可以使用计算属性来实现更加复杂的逻辑。例如：

<template>
  <div :class="classObject">
    This is a div element.
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isDisabled: false
    }
  },
  computed: {
    classObject() {
      return {
        active: this.isActive && !this.isDisabled,
        disabled: this.isDisabled
      }
    }
  }
}
</script>

上面的代码中，我们使用 `computed` 属性来定义 `classObject` 计算属性。在 `classObject` 中，我们可以根据 `isActive` 和 `isDisabled` 的值来动态生成需要添加的类名。