v-for循环中,只对当前点击的div设置class,不影响其他div

在Vue中，如果你想在`v-for`循环中仅对当前点击的`div`设置特定的`class`，并且不会影响到其他`div`，你可以使用`v-bind:class`和JavaScript的条件渲染来实现。这里有一个示例：

<template>
  <div id="app">
    <div v-for="(item, index) in items" :key="index" @click="toggleClass(index)">
      <div :class="{ active: isCurrentActive(index) }">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      // 初始化时所有div都是非active状态
      currentActiveIndex: -1,
    };
  },
  methods: {
    toggleClass(index) {
      this.currentActiveIndex = index; // 当点击时，更新当前活跃项
    },
    isCurrentActive(index) {
      return this.currentActiveIndex === index; // 判断当前激活的是不是这个元素
    }
  }
};
</script>

<style scoped>
.active {
  background-color: lightblue; // 设置被选中的div样式
}
</style>

在这个例子中，每个`div`都有一个内部的`div`，外层的`div`通过`:class="{ active: isCurrentActive(index) }"`绑定了`active`类。只有当用户点击对应的`div`时，`toggleClass`方法会更新`currentActiveIndex`，进而让对应的`div`获得`active`类，其余的则保持原样。