Vue通过三目运算实现切换样式

作者: hao_developer | 来源:发表于2021-01-05 09:41 被阅读0次

效果：
点击前：

image.png
点击后：

image.png
代码(要以数组的方式来实现)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <style>
            .isClick{
                width: 100px;
                height: 100px;
                background: blue;
            }
            .isNormal{
                width: 100px;
                height: 100px;
                background: green;
            }
        </style>
    </head>
    <body>
        
        <div id="app">
           <div v-bind:class="[isChecked ? 'isClick' : 'isNormal']"></div>
           <button v-on:click="changeStyle" style="margin-top: 20px;">点击切换样式</button>
        </div>
        
    </body>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                isChecked:false
            },
            methods:{
                changeStyle:function(){
                    this.isChecked = !this.isChecked;
                }
            }
        });
        
    </script>
    
</html>