一. 效果

      点击按钮前：

       点击按钮后： 

       再次点击按钮变回原来的样式：

 二. 具体代码

<template>
    <div id="box">
        <button @click="btn" id="but" v-bind:class="{ but01: style1, but02: style2 }">按钮</button>
    </div>
</template>
<style scoped>
#but {
    width: 100px;
    height: 50px;
    color: #fff;
}

.but01 {
    background-color: black;
}

.but02 {
    background-color: blue;
}
</style>
<script>
export default {
    data() {
        return {
            style1: true,
            style2: false
        }
    },
    methods: {
        btn() {
            this.style1 = !this.style1
            this.style2 = !this.style2  
        }
    }
}   
</script>