vue开关

Posted 2021-02-21 zhaofeis

<template>
  <div>
    <div>
      <div class="switch-panel" @click="isflag" :class="{‘switch-left‘: flag,‘switch-right‘: !flag}">
        <span class="switch-ico"></span>
        {{ getFlag }}
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                flag: true,
            }
        },
        methods: {
            isflag () {
                return this.flag = !this.flag
            }
        },
        computed: {
            getFlag () {
                return this.flag
            }
        }
    }
</script>
<style>
  .switch-panel{position:relative;transition:1s;width:50px;height:20px;border-radius:20px;background:#13CE66;cursor:pointer;}
  .switch-ico{transition:.5s;float:left;margin-top:1px;width:18px;height:18px;background:#fff;border-radius:50%;}
  .switch-left{background:red;}
  .switch-right{background:#13CE66;}
  .switch-left .switch-ico{transform:translateX(0);}
  .switch-right .switch-ico{transform:translateX(30px);}

</style>