本教程详细介绍了如何在 Vue 3 的 `v-for` 循环中，为一组按钮实现单选（一次只能激活一个或无激活）及点击已激活按钮进行切换（取消激活）的功能。文章将通过 Composition API 结合响应式状态管理，提供清晰的代码示例和实现步骤，帮助开发者高效构建交互式筛选或标签页组件。

引言

在现代前端应用中，构建交互式的用户界面是常见的需求。例如，一个筛选器头部、一组标签页或导航菜单，通常需要用户从多个选项中选择一个，并且能够取消当前的选择。本文将聚焦于 Vue 3 环境下，如何利用 v-for 指令循环渲染按钮，并实现“单选（仅一个或无激活）”和“点击已激活项进行切换（取消激活）”的复合逻辑。

核心原理：响应式状态管理

Vue 3 的 Composition API 提供了强大的响应式能力。要实现按钮的单选与切换功能，关键在于使用一个响应式变量来追踪当前激活的类别。当这个变量的值发生变化时，Vue 会自动更新所有依赖它的模板部分，从而实现按钮激活状态的动态切换。

我们将使用 ref 来创建一个响应式变量，它能够存储一个原始值或对象，并在其值被修改时触发视图更新。

实现步骤

1. 定义数据和响应式状态

首先，我们需要定义一个包含所有类别名称的数组，以及一个用于追踪当前激活类别的响应式变量。

// script setup 块中
import { ref } from 'vue';

// 假设这是你的内容类别数据
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);

// 定义一个响应式变量来存储当前选中的类别
// 初始值设为空字符串，表示没有类别被选中
const selectedCategory = ref('');

2. 模板结构

接下来，在模板中使用 v-for 循环渲染按钮，并绑定点击事件和动态类名。

• v-for="category in contentCategories": 遍历 contentCategories 数组，为每个类别生成一个按钮。
• :key="category": 在 v-for 中使用 key 属性是最佳实践，它帮助 Vue 追踪每个节点的身份，提高渲染效率。在这里，类别名称本身可以作为唯一的 key。
• @click="handleClick(category)": 当按钮被点击时，调用 handleClick 方法，并将当前类别作为参数传递。
• :class="{ 'filter-button': true, 'active': selectedCategory === category }": 动态绑定类名。filter-button 是基础样式，active 类则在 selectedCategory 的值与当前按钮的 category 匹配时被添加。

3. 处理点击事件

handleClick 函数是实现单选和切换逻辑的核心。它的任务是根据用户的点击行为，更新 selectedCategory 的值。

// script setup 块中
// ... (之前的 import 和 ref 定义)

function handleClick(category) {
  if (selectedCategory.value === category) {
    // 如果点击的是当前已激活的类别，则取消激活（设为空字符串）
    selectedCategory.value = '';
  } else {
    // 如果点击的是其他类别或当前没有激活类别，则激活新类别
    selectedCategory.value = category;
  }
}

这段逻辑简洁地实现了所需行为：

• 当用户点击一个未激活的按钮时，selectedCategory 会更新为该按钮对应的类别，使其激活。
• 当用户点击一个已激活的按钮时，selectedCategory 会被清空，从而取消该按钮的激活状态。
• 当用户点击一个与当前激活按钮不同的按钮时，selectedCategory 会更新为新点击的类别，自动取消旧按钮的激活并激活新按钮。

4. 样式定义

为了使激活状态在视觉上有所区分，我们需要为 .active 类定义一些 CSS 样式。

/* style 块中 */
.filter-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-button {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-button:hover {
  background-color: #e0e0e0;
}

.filter-button.active {
  background-color: #007bff; /* 激活状态的背景色 */
  color: white; /* 激活状态的文字颜色 */
  border-color: #007bff;
}

完整示例代码

将上述所有部分整合到一个 Vue 单文件组件（SFC）中，示例如下：

数据过滤集成

在实际应用中，你通常会根据 selectedCategory 的值来过滤或加载相应的数据。在上面的完整示例中，我们展示了如何使用一个 computed 属性 filteredList 来实现这一目标。当 selectedCategory 变化时，filteredList 会自动重新计算，从而更新显示的内容。

const filteredList = computed(() => {
  if (selectedCategory.value === '') {
    return allItems.value; // 如果没有选中类别，显示所有内容
  }
  return allItems.value.filter(item => item.category === selectedCategory.value);
});

注意事项

• key 属性的重要性: 在 v-for 循环中始终使用 key 属性。它帮助 Vue 识别列表中的每个节点，从而高效地更新 DOM，尤其是在列表项顺序变化或增删时。
• 初始状态: 确保 selectedCategory 的初始值能正确反映组件的默认状态（例如，初始没有选中任何类别）。
• 样式: 确保 .active 类的 CSS 样式能够清晰地指示出按钮的激活状态，提升用户体验。
• 数据结构: 如果你的类别数据本身就包含更多信息（例如图标、ID等），可以将 contentCategories 定义为对象数组，并相应调整 handleClick 逻辑和 key 属性。

总结

通过 Vue 3 的 Composition API 和响应式系统，我们可以非常灵活且高效地实现复杂的 UI 交互逻辑。本教程所展示的单选与切换功能，是构建各种筛选器、导航菜单和标签页的基石。掌握这种模式，将有助于你创建更加动态和用户友好的 Vue 应用程序。关键在于合理利用 ref 追踪状态，并通过动态类绑定和事件处理函数来响应用户交互。