老师使用style添加样式如何实现切换功能吗？

<!-- 使用对象对象绑定样式练习 -->
<!-- <div id="app">
        <button @click="btnStyle" :class="{btnStyleOne: isActivated, btnStyleTwo: isActivated2}">点我</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActivated: true,
                isActivated2: false
            },
            methods: {
                btnStyle(){
                    if(this.isActivated){
                        this.isActivated2 = true;
                        this.isActivated = false;
                    }else{
                        this.isActivated2 = false;
                        this.isActivated = true;
                    }
                }
            }

        })
    </script> -->
    
    
    <!-- 使用class的数组绑定样式 -->
<div id="app">
<button :class="[btnStyle]" @click="btnStyles">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
btnStyle:'btnStyleOne'
},
methods:{
btnStyles(){
this.btnStyle = this.btnStyle === "btnStyleOne" ? "btnStyleTwo" : "btnStyleOne";
}
}
})
</script>



.btnStyleOne{
background-color: blueviolet;
border:none;
font-size: 20px;
color:#fff;
}

.btnStyleTwo{
background-color: red;
border:2px solid #000;
font-size: 30px;
color: #000;
}