在 vue 3 中，若需为列表中被点击的单项独立切换 css 类（而非全局切换），应为每个元素维护独立的激活状态——推荐使用与 `images` 等长的布尔数组 `activestate`，并通过索引精准控制，避免所有项同步响应。
在你提供的代码中，data() 中定义的 active: false 是一个共享的响应式变量，导致所有 元素共用同一状态——点击任意一项都会翻转 active 值，进而使整个 v-for 列表中的所有元素同时应用或移除 itsActive 类。这违背了“仅高亮当前点击项”的交互需求。
要实现按项独立控制，核心思路是：为每个图片分配专属的激活状态位。最佳实践是创建一个长度与 images 一致的响应式布尔数组，并通过 index 精准读写对应位置的值。
✅ 正确实现方式（Options API）
<script>
export default {
props: {
images: {
type: Array,
required: true,
default: () => []
}
},
data() {
return {
// 初始化等长布尔数组，每项默认为 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-if="images"
v-for="(image, index) in images"
:key="index"
class="cursor-zoom-in"
>
@@##@@
</figure>
</div>
</section>
</template>? 关键点说明：activeState[index] 确保类绑定只依赖当前循环项的独立状态；@click="toggleState(index)" 将事件作用域锁定到当前 index，避免副作用；使用 new Array(...).fill(false) 初始化可保证响应性（Vue 2/3 Options API 中，数组初始值需在 data() 中完整声明，否则新增索引不会被响应式追踪）。
⚠️ 注意事项
- 若后续动态更新 images 数组（如添加/删除图片），需同步调整 activeState 长度（例如监听 images 变化并重置数组），否则可能出现索引越界或状态错位；
- 在 <script setup>（Composition API）中，推荐使用 ref([]) + watch 或 computed 动态同步长度，逻辑更清晰；</script>
- CSS 类名 itsActive 需确保已在样式表中正确定义，例如：
.itsActive { outline: 2px solid #3b82f6; transform: scale(1.02); }
✅ 进阶建议（Composition API 版本）
若项目已采用 <script setup>，可更优雅地实现：</script>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
images: {
type: Array,
required: true,
default: () => []
}
})
const activeState = ref(props.images.map(() => false))
// 图片列表变更时自动同步状态数组长度
watch(() => props.images, (newImages) => {
activeState.value = newImages.map(() => false)
})
const toggleState = (index) => {
activeState.value[index] = !activeState.value[index]
}
</script>这样既保持响应式健壮性，又符合 Vue 3 推荐的 Composition API 风格。无论采用哪种 API，核心原则不变：状态粒度必须与 UI 元素一一对应——这是实现精准类切换的根本保障。
立即学习“前端免费学习笔记（深入）”；
