vue3 button只能选一个

可以通过以下代码实现控制 Vue3 中的按钮只能选取一个：

HTML 代码：

<template>
  <div>
    <button class="btn" :class="{active: activeIndex === 0}" @click="setActive(0)">按钮1</button>
    <button class="btn" :class="{active: activeIndex === 1}" @click="setActive(1)">按钮2</button>
    <button class="btn" :class="{active: activeIndex === 2}" @click="setActive(2)">按钮3</button>
  </div>
</template>

JavaScript 代码：

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

export default {
  setup() {
    const activeIndex = ref(0);

    const setActive = (index) => {
      activeIndex.value = index;
    };

    return {
      activeIndex,
      setActive,
    };
  },
};
</script>

<style>
.active {
  background-color: #f00;
}
</style>

上述代码中，我们首先使用 `ref` 函数创建一个响应式变量 `activeIndex`，表示当前选中按钮的索引。然后我们在模板中使用 `:class` 绑定样式类，根据 `activeIndex` 的值来判断当前按钮是否处于活跃状态，如果是则添加 `active` 类名。

在每个按钮的点击事件处理函数中，我们更新 `activeIndex` 的值，将其设置为当前按钮的索引，这样就能保证每次只会有一个按钮处于活跃状态。