Vue v-for循环内点击单个元素切换class全部触发如何解决

AI 小北

2026-9-25

核心修改点

点击事件传递当前遍历到的图片对象作为参数，让方法明确知道操作的是哪张图
新增isSelected状态字段控制选中类名，避免覆盖原始类名，逻辑更清晰
修正v-for的key绑定为唯一值image.url，避免渲染异常

完整修改后代码

template部分

<div class="collage-banner">
  <img
    v-for="image in images"
    @click="imgSelected(image)"
    :alt="image.alt"
    class="collage"
    :class="[image.originClass, image.isSelected ? 'collage-click' : '']"
    :src="image.url"
    :key="image.url"
  />
</div>

js部分

export default {
  data() {
    return {
      images: [
        { url: img1, originClass: "img-1", isSelected: false, alt: "collage img" },
        { url: img2, originClass: "img-2", isSelected: false, alt: "collage img" },
        { url: img3, originClass: "img-3", isSelected: false, alt: "collage img" },
        { url: img4, originClass: "img-4", isSelected: false, alt: "collage img" },
        { url: img5, originClass: "img-5", isSelected: false, alt: "collage img" },
        { url: img6, originClass: "img-6", isSelected: false, alt: "collage img" },
        { url: img7, originClass: "img-7", isSelected: false, alt: "collage img" },
        { url: img8, originClass: "img-8", isSelected: false, alt: "collage img" }
      ]
    }
  },
  methods: {
    imgSelected(currentImage) {
      // 单选效果：点击任意图片，仅当前图片高亮，其他取消高亮
      this.images.forEach(img => img.isSelected = false)
      currentImage.isSelected = !currentImage.isSelected

      // 若需要多选效果，删除上面遍历清空选中的代码，仅保留以下一行即可
      // currentImage.isSelected = !currentImage.isSelected
    }
  }
}