vue v-for 循环div div中包含一个按钮和一个p标签,点击按钮改变p标签 的背景颜色
时间: 2024-03-22 08:36:50 浏览: 183
vue实现点击按钮切换背景颜色的示例代码
5星 · 资源好评率100%
好的,你可以在上一个问题的基础上稍作修改,将 div 中的背景颜色改为 p 标签的背景颜色,同时在按钮的点击事件中修改对应 p 标签的背景颜色。
具体代码如下:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<p :style="{ backgroundColor: item.color }">{{ item.content }}</p>
<button @click="changeColor(index)">Change Color</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ content: 'Red', color: 'red' },
{ content: 'Blue', color: 'blue' },
{ content: 'Green', color: 'green' },
],
};
},
methods: {
changeColor(index) {
// 改变指定索引的 p 标签的背景颜色
this.items[index].color = 'yellow';
},
},
};
</script>
```
这里除了在每个 div 中包含一个 p 标签外,其他与上一个问题的代码基本相同。在每个 p 标签中使用数据 items 中的 color 属性来设置背景颜色。在按钮的点击事件中,修改 items 数组中指定索引的元素的 color 属性,从而改变对应 p 标签的背景颜色。
阅读全文