在 vue 3 的 `v-for` 列表中，若需为每个元素独立控制类名（如点击单张图片高亮），不可共用单一布尔状态，而应使用与列表等长的状态数组，并通过索引精准更新对应项。
在 Vue 3（尤其是选项式 API）中，当对 v-for 渲染的多个元素使用同一个响应式变量（如 active: false）控制 :class 时，所有元素会同步响应——点击任一项都会触发全局切换，违背“仅激活当前项”的交互预期。根本原因在于：共享状态无法表达个体差异。
解决思路是将“是否激活”这一状态从全局变量升级为按索引隔离的局部状态。推荐做法是维护一个与 images 数组长度一致的布尔数组 activeState，每个下标对应一张图片的激活状态。
以下是完整、可直接运行的优化实现：
<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"
>
@@##@@
</figure>
</div>
</section>
</template>
<style scoped>
.itsActive {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
border-radius: 4px;
}
</style>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- activeState 使用 new Array(n).fill(false) 初始化，确保每个图片拥有独立的响应式状态位；
- @click="toggleState(index)" 将事件绑定到具体索引，避免副作用扩散；
- :class="{ 'itsActive': activeState[index] }" 实现精准类名绑定，语义清晰且性能友好；
- 若后续需支持多选或取消其他项（单选模式），可在 toggleState 中扩展逻辑，例如先重置全部再设当前项为 true；
- 注意：若 images 是响应式 prop 且可能动态变更长度，建议在 watch 中同步调整 activeState 长度（但多数场景下图片列表静态，此步可省略）。
该方案符合 Vue 响应式设计原则，结构清晰、易于维护，是处理列表项独立状态的经典范式。
