uniapp遍历的button点击后切换背景颜色其余变回原本的背景颜色

可以通过在按钮的点击事件中修改按钮的样式来实现这个效果。具体操作如下：

1. 在按钮的样式中定义两种背景颜色，例如：

.btn {
  background-color: #fff; /* 原本的背景色 */
}

.btn.active {
  background-color: #f00; /* 点击后的背景色 */
}

2. 在按钮的点击事件中，先遍历所有按钮，将它们的样式恢复为原本的背景色，再将当前按钮的样式修改为点击后的背景色，例如：

methods: {
  handleClick(event) {
    const buttons = this.$refs.buttons; // 获取所有按钮的数组
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].classList.remove('active'); // 移除所有按钮的 active 类
    }
    event.target.classList.add('active'); // 给当前按钮添加 active 类
  }
}

3. 在模版中，为每个按钮绑定点击事件，并添加 ref 属性以便在方法中获取所有按钮的数组，例如：

<template>
  <div>
    <button class="btn" v-for="item in list" :key="item.id" @click="handleClick" ref="buttons">{{ item.text }}</button>
  </div>
</template>