vue v-for 循环div div中包含一个按钮,点击按钮改变div 的背景颜色
时间: 2023-11-17 16:30:50 浏览: 103
好的,可以使用 Vue 的数据绑定和事件绑定来实现这个需求。你可以先使用 v-for 循环生成多个 div,然后每个 div 中包含一个按钮,绑定一个点击事件,在事件处理函数中改变该 div 的背景颜色。
具体代码如下:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index" :style="{ backgroundColor: item.color }">
<button @click="changeColor(index)">Change Color</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ color: 'red' },
{ color: 'blue' },
{ color: 'green' },
],
};
},
methods: {
changeColor(index) {
// 改变指定索引的 div 的背景颜色
this.items[index].color = 'yellow';
},
},
};
</script>
```
这里使用 v-for 循环生成了多个 div,每个 div 的背景颜色使用数据 items 中的 color 属性来设置。在每个 div 中还包含一个按钮,绑定了一个点击事件 changeColor,该事件接收一个参数 index,表示要改变的 div 的索引。在事件处理函数中,可以通过修改 items 数组中指定索引的元素的 color 属性来改变对应 div 的背景颜色。
阅读全文