本教程详细介绍了在 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 类。
代码示例
注意事项
- selectedCategory 的初始值应设置为一个不会与任何分类名称冲突的值（例如空字符串 ''），以确保初始状态下没有按钮被激活。
- :key 属性在这里直接使用了 category 的值，因为分类名称是唯一的。如果分类名称可能重复，应使用具有唯一性的 ID。
场景二：多选模式（可同时激活多个）
在某些情况下，我们可能需要允许用户同时选择多个分类。在这种模式下，每个按钮的激活状态是独立的，点击已激活的按钮会取消激活，点击未激活的按钮会激活。
实现思路
- 数据源不再仅仅是字符串数组，而是一个对象数组，每个对象包含分类名称和其当前的激活状态（例如 active: true/false）。
- 在 v-for 循环中，为每个按钮绑定点击事件，该事件会切换对应分类对象的 active 属性。
- 通过 :class 绑定，直接根据分类对象的 active 属性判断是否应该拥有 active 类。
代码示例
注意事项
- 数据源 categoriesData 必须是响应式的（通过 ref 包裹），并且其内部的对象也需要被 Vue 响应式系统追踪。当修改 categoryItem.active 时，视图会自动更新。
- :key 属性在这里使用了 category.name，前提是 name 属性在 categoriesData 中是唯一的。如果不是，应使用更可靠的唯一 ID。
总结
通过上述两种场景的实现，我们可以看到在 Vue 3 中管理 v-for 循环生成的按钮的激活状态是相对直接的。关键在于：
- 明确数据结构：根据是单选还是多选，选择合适的数据结构来存储分类信息及其状态。
- 利用 ref 创建响应式状态：确保用于判断按钮激活状态的变量是响应式的。
- 绑定点击事件：在点击事件中，根据业务逻辑更新响应式状态。
- 动态 :class 绑定：根据响应式状态的值，动态地为按钮添加或移除 active CSS 类，从而改变其外观。
掌握这些技巧，将使你能够轻松构建出功能丰富、用户体验良好的交互式界面。
