vue3中点击按钮切换状态

在 Vue3 中，你可以使用 `ref` 来创建一个响应式变量，并使用 `v-bind` 绑定到按钮上。然后，在按钮的 `@click` 事件上，你可以使用 `ref` 的 `.value` 属性来更改状态。

以下是一个简单的示例：

<template>
  <div>
    <button @click="toggleState">{{ state.value ? 'On' : 'Off' }}</button>
  </div>
</template>

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

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

    function toggleState() {
      state.value = !state.value;
    }

    return {
      state,
      toggleState,
    };
  },
};
</script>

在上面的例子中，我们使用 `ref` 创建了一个名为 `state` 的响应式变量，并将其初始值设置为 `false`。然后，我们在模板中使用 `v-bind` 将 `state` 绑定到按钮的文本上。在按钮的 `@click` 事件中，我们使用 `toggleState` 函数来切换 `state` 的值。

当按钮被点击时，`toggleState` 函数会被调用，将 `state` 的值从 `false` 切换为 `true`，或从 `true` 切换为 `false`。然后，模板会自动重新渲染，将按钮的文本更新为 `On` 或 `Off`。