本教程详细介绍了如何在 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 循环渲染按钮，并绑定点击事件和动态类名。
<template>
<div class="filter-container">
<button
v-for="category in contentCategories"
:key="category"
@click="handleClick(category)"
:class="{ 'filter-button': true, 'active': selectedCategory === category }"
>
{{ category }}
</button>
</div>
</template>- 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）中，示例如下：
<template>
<div class="filter-container">
<button
v-for="category in contentCategories"
:key="category"
@click="handleClick(category)"
:class="{ 'filter-button': true, 'active': selectedCategory === category }"
>
{{ category }}
</button>
</div>
<p>当前选中的类别：{{ selectedCategory === '' ? '无' : selectedCategory }}</p>
<!-- 假设这里是你的内容列表，可以根据 selectedCategory 进行过滤 -->
<div class="content-list">
<h3>过滤后的内容 (示例)</h3>
<ul>
<li v-for="item in filteredList" :key="item.id">
{{ item.name }} ({{ item.category }})
</li>
</ul>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
// 类别数据
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);
// 追踪当前选中的类别
const selectedCategory = ref('');
// 处理按钮点击事件的函数
function handleClick(category) {
if (selectedCategory.value === category) {
selectedCategory.value = ''; // 切换：如果已选中，则取消选中
} else {
selectedCategory.value = category; // 选择新类别
}
}
// 示例：根据 selectedCategory 过滤内容列表
const allItems = ref([
{ id: 1, name: 'Item A', category: 'Category 1' },
{ id: 2, name: 'Item B', category: 'Category 2' },
{ id: 3, name: 'Item C', category: 'Category 1' },
{ id: 4, name: 'Item D', category: 'Category 3' },
{ id: 5, name: 'Item E', category: 'Category 2' },
{ id: 6, name: 'Item F', category: 'Category 4' },
]);
const filteredList = computed(() => {
if (selectedCategory.value === '') {
return allItems.value; // 如果没有选中类别，显示所有内容
}
return allItems.value.filter(item => item.category === selectedCategory.value);
});
</script>
<style scoped>
.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;
font-size: 16px;
}
.filter-button:hover {
background-color: #e0e0e0;
}
.filter-button.active {
background-color: #007bff;
color: white;
border-color: #007bff;
font-weight: bold;
}
.content-list {
margin-top: 20px;
border: 1px solid #eee;
padding: 15px;
border-radius: 8px;
}
.content-list ul {
list-style-type: none;
padding: 0;
}
.content-list li {
padding: 5px 0;
border-bottom: 1px dotted #eee;
}
.content-list li:last-child {
border-bottom: none;
}
</style>数据过滤集成
在实际应用中，你通常会根据 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 追踪状态，并通过动态类绑定和事件处理函数来响应用户交互。
