Vue 3 中为列表项独立切换 CSS 类的正确实践

在 vue 3 中，若需为 `v-for` 渲染的多个元素（如图片列表）实现「点击单个项目时仅该元素切换样式类」，必须为每个项维护独立的状态，而非共用一个布尔值；否则所有元素将同步响应同一状态变更。

在 vue 3 的组合式 API 或选项式 API 中，处理列表项的独立交互状态是一个高频需求。你当前代码中使用了全局 active: false，导致所有 共享同一个布尔状态——只要触发一次 @click，整个 active 值翻转，所有元素的 { itsActive: active } 同时计算为 true 或 false，因此出现“全部高亮”或“全部取消”的现象。

✅ 正确解法是：为每个列表项分配独立的状态标识。推荐使用与 images 等长的响应式数组（如 activeState），通过索引精准控制单个项的激活状态。

以下是基于选项式 API 的完整、可运行实现（兼容 Vue 3.2+）：

? 关键要点说明：

立即学习“前端免费学习笔记（深入）”；

• activeState[index] 确保每个 绑定的是专属状态，互不干扰；
• 使用 new Array(n).fill(false) 初始化数组是安全且高效的方式（避免稀疏数组问题）；
• :key=”index” 在 v-for 中已正确设置，保障 dom 复用逻辑稳定（但更推荐使用唯一 id 字段作为 key，见下方进阶提示）；
• itsActive 类名需在 css 中正确定义，例如：

  .itsActive {   outline: 2px solid #3b82f6;   transform: scale(1.02);   transition: all 0.2s ease; }

⚠️ 注意事项与进阶建议：

• 若 images 数组后续可能动态增删，需确保 activeState 同步更新（例如监听 images 变化并重置数组），或改用 ref([]) + watch 进行响应式同步；
• 更健壮的做法是：为每张图片赋予唯一 id（如 image.id），并将 activeState 改为 map 或对象（{ [id]: Boolean }），避免因数组顺序变化导致状态错位；
• 在组合式 API（

掌握这种「按索引隔离状态」的模式，不仅能解决 class 切换问题，也适用于展开/收起、选中/取消、编辑态控制等各类列表交互场景——核心原则始终是：状态粒度须与 ui 元素粒度对齐。