如何在单击时使用Vue切换/停用活动的html类？

<template>
  <div>
    <!-- 使用v-bind:class绑定active类 -->
    <button :class="{ active: isActive }" @click="toggleActive">
      Click me
    </button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义一个响应式引用，用于跟踪按钮是否处于活动状态
    const isActive = ref(false);

    // 定义一个方法来切换isActive的状态
    function toggleActive() {
      isActive.value = !isActive.value;
    }

    // 返回变量和方法，使其在模板中可用
    return { isActive, toggleActive };
  }
};
</script>

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

<template>
  <div>
    <button :class="buttonClasses" @click="toggleActive">
      Click me
    </button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const isActive = ref(false);

    function toggleActive() {
      isActive.value = !isActive.value;
    }

    // 使用计算属性来决定类
    const buttonClasses = computed(() => ({
      active: isActive.value,
      // 这里可以添加更多的类和逻辑
    }));

    return { buttonClasses, toggleActive };
  }
};
</script>