vue3+ts+vite 动态修改div class

在 Vue3 + TypeScript + Vite 中，可以使用 `:class` 指令来动态绑定 `class` 属性。

下面是一个示例代码：

<template>
  <div :class="{'red': isRed, 'blue': isBlue}">
    <h1>动态修改 class</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isRed = ref<boolean>(true);
    const isBlue = ref<boolean>(false);

    const toggleClass = () => {
      isRed.value = !isRed.value;
      isBlue.value = !isBlue.value;
    };

    return {
      isRed,
      isBlue,
      toggleClass,
    };
  },
});
</script>

<style>
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
</style>

在这个示例中，我们使用 `:class` 指令绑定了一个对象，对象的属性名是 `class` 名称，属性值是一个布尔值，表示该 `class` 是否应用于元素。当 `isRed` 值为 `true` 时，`red` 类将添加到元素上；当 `isBlue` 值为 `true` 时，`blue` 类将添加到元素上。

在 `setup` 函数中，我们定义了 `isRed` 和 `isBlue` 两个变量，并初始化为 `true` 和 `false`。然后，我们定义了一个 `toggleClass` 函数，用来切换 `isRed` 和 `isBlue` 的值，从而动态修改元素的 `class`。

最后，我们在模板中使用了 `:class` 指令，并绑定了 `isRed` 和 `isBlue` 变量。当 `toggleClass` 函数被调用时，`isRed` 和 `isBlue` 的值将发生改变，从而动态修改元素的 `class`。

需要注意的是，为了使用 `:class` 指令，需要在模板中使用 `v-bind` 或 `:` 前缀。在对象中，属性名必须是字符串，属性值可以是布尔值、字符串、数组或对象。在本例中，我们使用了布尔值来动态添加或移除 `class`。