vue v-再次点击按钮p 标签的背景颜色变回去

好的，你可以在上一个问题的基础上继续修改，在按钮的点击事件中添加判断逻辑，当 p 标签的背景颜色已经是黄色时，再次点击按钮时将背景颜色改回原来的颜色。

具体代码如下：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <p :style="{ backgroundColor: item.color }">{{ item.content }}</p>
      <button @click="changeColor(index)">{{ item.color === 'yellow' ? 'Reset Color' : '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 标签的背景颜色是否为黄色
      if (this.items[index].color === 'yellow') {
        // 如果是黄色，则将背景颜色改为原来的颜色
        this.items[index].color = this.items[index].content.toLowerCase();
      } else {
        // 如果不是黄色，则将背景颜色改为黄色
        this.items[index].color = 'yellow';
      }
    },
  },
};
</script>

这里在按钮的文本中添加了判断逻辑，当 p 标签的背景颜色为黄色时，按钮文本为 Reset Color，表示点击按钮可以将背景颜色改回原来的颜色；否则，按钮文本为 Change Color，表示点击按钮可以将背景颜色改为黄色。在按钮的点击事件中，添加判断逻辑，当 p 标签的背景颜色为黄色时，将其改回原来的颜色；否则，将其改为黄色。