javascript - 如何将样式类应用于按钮，但在 Vue 中的任何时候只能激活一个按钮？

Question

我已经设法将我的按钮类从初始更改为 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;
}

但想拥有：

<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>

任何帮助都会受到极大的欢迎。

Answer 1

您可以简单地将 id 传递给您的setActiveTab方法

new Vue({
  el: "#app",
  data: {
activeTab: 0
  },
  methods: {
      setActiveTab(id){
        this.activeTab = id;
      }
  }
})

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

看到这个 JSFiddle

你可以使用v-for..

<div id="app">
  <button v-for="id in 3" :class="{'initial': activeTab !== id, 'is-active': activeTab === id}" name="button" @click="setActiveTab(id)">BUTTON {{ id }}</button>
</div>

JSFiddle