一. 效果

      点击按钮前：

         

       点击按钮后： 

               

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

          

 二. 具体代码

         

<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.style1this.style2 = !this.style2  }}
}   
</script>