vue 循环div 点击某一个div改变背景色

在Vue中，要实现循环生成的div点击时改变背景色，可以通过绑定点击事件并使用JavaScript逻辑来改变对应div的背景色。以下是一个简单的实现方法：

首先，可以在Vue模板中使用v-for指令循环生成div，并为每个div绑定点击事件，将对应的索引或数据传递给处理函数。

<div v-for="(item, index) in items" :key="index" @click="changeBackgroundColor(index)">
  {{ item.text }}
</div>

然后，在Vue实例的methods中定义处理函数`changeBackgroundColor`，该函数接收一个索引参数，并通过这个索引找到对应的数据项，然后更新其背景色。

methods: {
  changeBackgroundColor(index) {
    // 假设items中的每个对象都有一个background属性
    this.items[index].background = "#FF0000"; // 设置为红色背景
  }
}

这里假设`items`是一个数组，每个数组元素都是一个对象，该对象至少包含一个`text`属性用于显示内容，以及一个`background`属性用于存储背景色。

data() {
  return {
    items: [
      { text: 'Div 1', background: '' },
      { text: 'Div 2', background: '' },
      // 更多的div...
    ]
  };
}

完成以上设置后，每个div在被点击时都会调用`changeBackgroundColor`方法，并通过索引找到对应的数组元素，更新其背景色。