vue多个按钮 点击某一个时更换颜色

可以通过绑定样式的方式来实现。首先在data中定义一个属性，用于控制当前被选中的按钮的索引（假设为selectedIdx），默认值为-1，表示没有任何按钮被选中。然后在方法中定义一个函数，接受按钮的索引作为参数，用于更新selectedIdx的值。最后在模板中使用v-bind:class来绑定样式，根据selectedIdx的值来判断哪个按钮应该被选中。

示例代码如下：

<template>
  <div>
    <button v-for="(btn, index) in buttons" :key="index" :class="{ active: selectedIdx === index }" @click="selectButton(index)">{{ btn }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: ['Button 1', 'Button 2', 'Button 3'],
      selectedIdx: -1
    }
  },
  methods: {
    selectButton(index) {
      this.selectedIdx = index
    }
  }
}
</script>

<style>
.active {
  background-color: red;
}
</style>

上面的代码中，当某个按钮被点击时，会调用selectButton方法，更新selectedIdx的值为当前按钮的索引。同时，在模板中使用v-bind:class绑定样式，当selectedIdx等于当前按钮的索引时，为其添加active类，实现选中效果。在样式中，我们定义active类的背景色为红色。