uniapp v-for循环中,点击click只对其中一个列表有作用,在这个列表中显示自己写的背景
时间: 2024-05-05 10:19:43 浏览: 74
你可以在循环的每个元素上添加一个点击事件的绑定,然后在事件处理函数中修改对应元素的样式。以下是一个示例代码:
```html
<template>
<div>
<div v-for="(item, index) in list" :key="index" @click="changeBackground(index)" :style="{ backgroundColor: item.bgColor }">{{ item.name }}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: 'Item 1', bgColor: '#fff' },
{ name: 'Item 2', bgColor: '#fff' },
{ name: 'Item 3', bgColor: '#fff' }
]
};
},
methods: {
changeBackground(index) {
this.list[index].bgColor = '#ccc';
}
}
};
</script>
```
在上面的示例中,我们在 `v-for` 循环中为每个元素绑定了一个点击事件 `@click="changeBackground(index)"`,并将点击事件的处理函数 `changeBackground` 中接收到的索引作为参数传入。在事件处理函数中,我们通过修改 `list` 数组中对应元素的 `bgColor` 属性来改变该元素的背景色。在模板中,我们使用 `:style` 绑定元素的背景色样式,使得循环中每个元素都可以根据其 `bgColor` 属性来显示不同的背景色。
阅读全文