Vue3中如何实现点击单个元素切换CSS类？

你当前的问题是用了一个全局布尔值active控制所有图片的类，导致点击时所有元素同步切换状态。要实现仅点击的元素添加类，需要记录当前激活元素的索引，而非单个布尔值。

修改后的代码 #

Script 部分 #

<script>
export default {
  props: {
    images: Array,
  },
  data() {
    return {
      // 用索引记录当前激活的元素，初始为null表示无激活状态
      activeIndex: null
    }
  }
} 
</script>

Template 部分 #

<template>
  <section class="flex gap-32 py-32 flex-row item 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">
        <!-- 只给索引匹配的元素添加itsActive类 -->
        <img 
          :src="image" 
          :key="index" 
          :class="{ itsActive: index === activeIndex }" 
          <!-- 点击时切换激活状态：当前元素已激活则取消，否则设为当前索引 -->
          @click="activeIndex = activeIndex === index ? null : index"
        >
      </figure>
    </div>
  </section>
</template>

代码说明 #

• 将原来的active布尔值替换为activeIndex，用于存储当前激活元素的索引，初始值null表示无元素处于激活状态
• 类绑定逻辑改为判断当前循环的index是否等于activeIndex，只有匹配的元素才会应用itsActive类
• 点击事件做了切换处理：如果点击的是已激活元素（索引匹配），就将activeIndex设为null取消激活；如果是未激活元素，就将activeIndex设为当前元素的索引，激活该元素

如果需要支持多选（多个元素可同时激活），可以把activeIndex改成数组activeIndexes，逻辑调整如下：

// script部分
data() {
  return {
    activeIndexes: []
  }
},
methods: {
  toggleActive(index) {
    if (this.activeIndexes.includes(index)) {
      this.activeIndexes = this.activeIndexes.filter(i => i !== index)
    } else {
      this.activeIndexes.push(index)
    }
  }
}

// template部分的img标签
<img 
  :src="image" 
  :key="index" 
  :class="{ itsActive: activeIndexes.includes(index) }" 
  @click="toggleActive(index)"
>

内容的提问来源于stack exchange，提问作者Math