用vue实现一个开关按钮

css样式

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .app{
            background-color: red;
            width: 100px;
            height: 36px;
            border-radius: 18px;
            overflow: hidden;
            transition: all 1s;
        }
        .app>div{
            background-color: #fff;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            transition: all 1s;
            margin: 1px;
        }
        .active1{
            background-color: green;
        }
        .active{
            transform: translateX(64px);
        }
    </style>

html

        <div class="wrapper">
            <div class="app" :class="sum==true? 'active1':'' " @click="demo()">
                <div :class="sum==true? 'active':''"></div>
            </div>
            <span>状态:{{msg}}</span>
        </div>

javascript

<script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            //挂载dom
            el:".wrapper",
            //数据
            data:{
                sum:false,
                msg: 'OFF'
            },
            methods: {
                demo(sum){
                    if(this.sum==false){
                    this.sum=true
                    this.msg='ON'
                   }else{
                    this.sum=false
                    this.msg='OFF'
                   }
                }
            },
            
        })