vue写的定时器

  <div v-show="show" class="code" @click="getCode">获取验证码</div>
  <div v-show="!show" class="active">{{count}}s</div>


  data() {
    return {
      show: true, // 用来展示获取验证码还是秒数的
      count: '',
    }
  },

  methods:{
    getCode(){
      let timer = null;
      let TIME_COUNT = 5;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null; // 停止后一定要设为空,否则再次点击就进不来
          }
        }, 1000)
      }
    }

  }
posted on 2020-11-04 10:54  取个名字真wff  阅读(146)  评论(0编辑  收藏  举报