Vue.js中，现在我有三个按钮，刚开始颜色一样，我想点击一个的时候那个变色，怎么实现呢?

Question

Vue.js中，现在我有三个按钮，刚开始颜色一样，我想点击一个的时候那个变色，怎么实现呢?
我的页面代码

                <button class="btn anni1" @click="zhengchang(i,x,y)">正常</button>
                                    <button class="btn anni2" @click="yichang(i,x,y)">异常</button>
                                    <button class="btn anni3" @click="beizhu(i,x,y)">备注</button>
                                    
                                    

想要的效果如下

只有一个是单独的颜色，剩下鲁昂个正常

Answer 1

<button @click="target='btn1'" :class="{red: target==='btn1'}">
<button @click="target='btn2'" :class="{red: target==='btn2'}">

Answer 2

<button class="btn anni1" :class="{active:index == num}" @click="zhengchang(i,x,y)">正常
</button>

    tab: function(index) {
        this.num = index;
    }

Answer 3

等我下午到公司给你贴解决方法