Javascript 如何将样式化类应用于按钮，但在Vue中任何时候只能有一个按钮处于活动状态？

我已经成功地将button类从initial更改为is active，但是我希望有多个按钮，但是is active类在任何时候都只能应用于一个按钮

<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 1</button>

  activeTab: 0

  methods: {
      setActiveTab(){
        this.activeTab = 1;
      }
  }

  .is-active {
  color: blue
}

.initial {
color: red;
}

按钮1
活动选项卡：0
方法：{
setActiveTab（）{
this.activeTab=1；
}
}
.处于活动状态{
颜色：蓝色
}
.首字母{
颜色：红色；
}

但我希望：

<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 1</button>
<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 2</button>
<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 3</button>

按钮1
按钮2
按钮3

---

任何帮助都会得到极大的帮助。

您只需将id传递给您的

setActiveTab

方法即可

newvue({
el:“应用程序”，
数据：{
活动选项卡：0
},
方法：{
setActiveTab（id）{
this.activeTab=id；
}
}
})

按钮1
按钮2
按钮3

最好使用v-for，而不是复制按钮3次。让你的代码更干净，那太好了。如果我有不同的按钮行，是否可以这样做？所以每行只能选择一个按钮？你能给我一个你想要的布局的小提琴/插图例子吗？例如：第1行：按钮1按钮2按钮3，第2行：按钮4按钮5按钮6，第3行：按钮7按钮8，按钮9所以每行可以选择一个按钮（按钮以大写字母选择）啊哈，我明白了。我会做一把小提琴，然后把它贴在这里，告诉你怎么做。那太好了。非常感谢。