本教程详细介绍了在 Vue 3 应用中，如何利用 v-for 循环动态渲染按钮，并有效管理它们的激活状态。文章涵盖了两种核心场景：单选（一次只能激活一个或无激活）和多选（可同时激活多个），通过 Vue 3 组合式 API 提供了清晰的代码示例和实现策略，旨在帮助开发者构建交互性强的筛选或分类界面。
在 Vue 3 中，当我们需要根据数据列表动态生成一组按钮，并希望这些按钮具有可点击的激活/非激活状态时，通常会结合 v-for 指令与响应式状态管理。这种场景在构建筛选器、标签云或分类导航时尤为常见。本教程将深入探讨如何优雅地实现这一功能，并提供两种常见的交互模式：单选模式（一次只能激活一个或无激活）和多选模式（可同时激活多个）。
核心概念
在开始之前，我们首先需要理解几个关键的 Vue 3 概念：
- v-for 指令：用于基于源数据列表渲染多个元素。在使用 v-for 时，务必为每个迭代项绑定一个唯一的 :key 属性，以帮助 Vue 高效地更新 DOM。
- ref 函数：Vue 3 组合式 API 中用于创建响应式引用。当 ref 的 .value 属性发生变化时，Vue 会自动检测并更新相关的视图。
- :class 绑定：Vue 提供了强大的 :class 绑定功能，允许我们根据组件的状态动态地添加或移除 CSS 类。
场景一：单选模式（一次只能激活一个或无激活）
在这种模式下，用户点击一个按钮会激活它，如果点击另一个按钮，则新的按钮被激活，而之前激活的按钮则变为非激活状态。如果用户再次点击当前已激活的按钮，则该按钮会变为非激活状态（即没有任何按钮被激活）。
立即学习“前端免费学习笔记（深入）”；
实现思路
- 使用一个 ref 变量（例如 selectedCategory）来存储当前被激活的分类名称。
- 在 v-for 循环中，为每个按钮绑定点击事件，该事件会更新 selectedCategory 的值。
- 通过 :class 绑定，根据 selectedCategory 的值判断当前按钮是否应该拥有 active 类。
代码示例
<script setup>
import { ref } from 'vue';
// 定义所有分类的列表
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);
// 定义一个响应式变量来存储当前选中的分类
// 初始值为空字符串，表示没有分类被选中
const selectedCategory = ref('');
/**
* 处理按钮点击事件的函数
* @param {string} category - 被点击的分类名称
*/
const handleClick = (category) => {
// 如果点击的分类已经是当前选中的分类，则取消选中（设置为''）
// 否则，将当前选中的分类更新为被点击的分类
selectedCategory.value = category === selectedCategory.value ? '' : category;
};
</script>
<template>
<div class="category-filter">
<button
v-for="category in contentCategories"
:key="category"
@click="handleClick(category)"
:class="{ 'active': selectedCategory === category }"
class="filter-button"
>
{{ category }}
</button>
</div>
</template>
<style scoped>
.category-filter {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.filter-button {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.filter-button:hover {
background-color: #e0e0e0;
}
.filter-button.active {
background-color: #007bff; /* 激活状态的背景色 */
color: white; /* 激活状态的文字颜色 */
border-color: #007bff; /* 激活状态的边框颜色 */
}
</style>注意事项
- selectedCategory 的初始值应设置为一个不会与任何分类名称冲突的值（例如空字符串 ''），以确保初始状态下没有按钮被激活。
- :key 属性在这里直接使用了 category 的值，因为分类名称是唯一的。如果分类名称可能重复，应使用具有唯一性的 ID。
场景二：多选模式（可同时激活多个）
在某些情况下，我们可能需要允许用户同时选择多个分类。在这种模式下，每个按钮的激活状态是独立的，点击已激活的按钮会取消激活，点击未激活的按钮会激活。
实现思路
- 数据源不再仅仅是字符串数组，而是一个对象数组，每个对象包含分类名称和其当前的激活状态（例如 active: true/false）。
- 在 v-for 循环中，为每个按钮绑定点击事件，该事件会切换对应分类对象的 active 属性。
- 通过 :class 绑定，直接根据分类对象的 active 属性判断是否应该拥有 active 类。
代码示例
<script setup>
import { ref } from 'vue';
// 定义所有分类的列表，每个分类现在是一个包含name和active属性的对象
const categoriesData = ref([
{ name: "Category A", active: false },
{ name: "Category B", active: false },
{ name: "Category C", active: false },
{ name: "Category D", active: false },
]);
/**
* 处理按钮点击事件的函数
* @param {object} categoryItem - 被点击的分类对象
*/
const toggleCategory = (categoryItem) => {
// 直接切换该分类对象的active属性
categoryItem.active = !categoryItem.active;
};
</script>
<template>
<div class="category-filter">
<button
v-for="category in categoriesData"
:key="category.name"
@click="toggleCategory(category)"
:class="{ 'active': category.active }"
class="filter-button"
>
{{ category.name }}
</button>
</div>
</template>
<style scoped>
.category-filter {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.filter-button {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.filter-button:hover {
background-color: #e0e0e0;
}
.filter-button.active {
background-color: #28a745; /* 多选模式下使用不同的激活背景色 */
color: white;
border-color: #28a745;
}
</style>注意事项
- 数据源 categoriesData 必须是响应式的（通过 ref 包裹），并且其内部的对象也需要被 Vue 响应式系统追踪。当修改 categoryItem.active 时，视图会自动更新。
- :key 属性在这里使用了 category.name，前提是 name 属性在 categoriesData 中是唯一的。如果不是，应使用更可靠的唯一 ID。
总结
通过上述两种场景的实现，我们可以看到在 Vue 3 中管理 v-for 循环生成的按钮的激活状态是相对直接的。关键在于：
- 明确数据结构：根据是单选还是多选，选择合适的数据结构来存储分类信息及其状态。
- 利用 ref 创建响应式状态：确保用于判断按钮激活状态的变量是响应式的。
- 绑定点击事件：在点击事件中，根据业务逻辑更新响应式状态。
- 动态 :class 绑定：根据响应式状态的值，动态地为按钮添加或移除 active CSS 类，从而改变其外观。
掌握这些技巧，将使你能够轻松构建出功能丰富、用户体验良好的交互式界面。
