Javascript 单击Vue.js交换类

我认为这是一件简单的事情，但我正在努力理解如何将一个类应用于一个按钮，然后在单击后切换到另一个类。我有多个按钮，我将作为过滤器使用，用户将只能选择一个按钮，只有该按钮将在选择后突出显示。我可以这样做，但我似乎无法删除使用v-bind更改文本颜色的初始类。初始类将不处于活动状态，选择后，highlight类将更改文本颜色

这里是没有添加noactive类的jsfiddle，我只是不知道什么是最好的解决方案

newvue({
el:“#vue”，
数据：{
已选择：“”
}
})

。突出显示{
颜色：绿色；
字体大小：16px；
边界：0；
背景：0；
}
.不活跃{
颜色：灰色；
边界：0；
背景：0；
字体大小：14px；
}

按钮1
按钮2
按钮3

newvue({
el:“#vue”，
数据：{
已选择：“”
}
})

。突出显示{
颜色：绿色；
字体大小：16px；
边界：0；
背景：0；
}
.不活跃{
颜色：灰色；
边界：0；
背景：0；
字体大小：14px；
}

按钮1
按钮2
按钮3

如果我理解您的问题，我相信答案很简单，只需在类绑定中为notactive类添加另一个条目即可：

<div id="vue">
 <button @click="selected = 1" :class="{highlight:selected == 1, notactive:selected !== 1}">Button1</button>
 <button @click="selected = 2" :class="{highlight:selected == 2, notactive:selected !== 2}">Button2</button>
 <button @click="selected = 3" :class="{highlight:selected == 3, notactive:selected !== 3}">Button3</button>
</div>

按钮1
按钮2
按钮3

---

这是最新的小提琴-

谢谢！这正是我想要的。