在 vue 3 中，若需为 `v-for` 渲染的多个元素（如图片列表）实现「点击单个项目时仅该元素切换样式类」，必须为每个项维护独立的状态，而非共用一个布尔值；否则所有元素将同步响应同一状态变更。
在 Vue 3 的组合式 API 或选项式 API 中，处理列表项的独立交互状态是一个高频需求。你当前代码中使用了全局 active: false，导致所有 <img> 共享同一个布尔状态——只要触发一次 @click，整个 active 值翻转，所有元素的 { itsActive: active } 同时计算为 true 或 false，因此出现“全部高亮”或“全部取消”的现象。
✅ 正确解法是：为每个列表项分配独立的状态标识。推荐使用与 images 等长的响应式数组（如 activeState），通过索引精准控制单个项的激活状态。
以下是基于选项式 API 的完整、可运行实现（兼容 Vue 3.2+）：
<script>
export default {
props: {
images: {
type: Array,
required: true,
default: () => []
}
},
data() {
return {
// 初始化一个与 images 长度一致的布尔数组，初始全为 false
activeState: new Array(this.images.length).fill(false)
}
},
methods: {
// 切换指定索引项的激活状态
toggleState(index) {
this.activeState[index] = !this.activeState[index]
}
}
}
</script>
<template>
<section class="flex gap-32 py-32 flex-row items-center relative">
<div class="grid basis-2/3 gap-x-16 gap-y-20" data-grid>
<figure
v-for="(image, index) in images"
:key="index"
class="cursor-zoom-in"
>
<img
:src="image"
:class="{ 'itsActive': activeState[index] }"
@click="toggleState(index)"
alt="Gallery item"
/>
</figure>
</div>
</section>
</template>? 关键要点说明：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- activeState[index] 确保每个 <img> 绑定的是专属状态，互不干扰；
- 使用 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（<script setup>）中，推荐使用 ref 和 computed 封装逻辑，提升可维护性：
const activeState = ref(images.map(() => false)) const toggleState = (index) => { activeState.value[index] = !activeState.value[index] }
掌握这种「按索引隔离状态」的模式，不仅能解决 class 切换问题，也适用于展开/收起、选中/取消、编辑态控制等各类列表交互场景——核心原则始终是：状态粒度须与 UI 元素粒度对齐。
