如何让只有一个元素激活vue js？

在Vue.js中，如果你想要确保在任何时候只有一个元素处于激活状态，你可以使用v-for指令结合一个计算属性或者方法来动态地绑定一个激活类（比如active）到当前选中的元素上。以下是一个基本的示例，展示了如何实现这个功能：

基础概念

v-for: Vue.js的指令，用于基于一个数组渲染一个列表。
计算属性: Vue.js中的一种属性，它的值是由其他数据计算而来的，并且是响应式的。
方法: Vue.js中的函数，可以在模板中调用或者在JavaScript代码中执行。

类型与应用场景

单选按钮: 在表单中选择单个选项。
标签页: 在多个内容区域之间切换。
导航菜单: 在多个页面或部分之间导航。

示例代码

以下是一个简单的Vue 3示例，展示了如何实现只有一个元素激活的功能：

<template>
  <div>
    <!-- 使用v-for渲染列表，并使用计算属性isActive来决定是否添加active类 -->
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :class="{ active: isActive(index) }"
      @click="setActive(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' }
    ]);
    const activeIndex = ref(null);

    // 计算属性，用于判断当前元素是否激活
    const isActive = (index) => activeIndex.value === index;

    // 方法，用于设置激活的元素
    const setActive = (index) => {
      activeIndex.value = index;
    };

    return { items, isActive, setActive };
  }
};
</script>

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