vue验证码60秒倒计时功能

打开页面开始倒计时：

html页中只需要获取倒计时的数{{countDownNum}}，就ok啦~
js：

<script>
export default{
    data(){
        return{
            countDownNum:3,
            timer:null
        }
    },
    methods:{
        countDown:function(){
            this.timer=setInterval(() => {
                this.countDownNum--;
                if(this.countDownNum<=0){
                    clearInterval(this.timer);
                }
            },1000);
        }
    },
    mounted:function(){
        this.countDown()
    }
}
</script>

点击开始倒计时：

HTML：

<template lang="html">
<div>
  <span v-show="show" @click="getCode">获取验证码</span>
  <span v-show="!show" class="count">{{count}} s</span>
</div>
</template>

js:

<script>
export default {
  data(){
    return {
     show: true,
     count: '',
     timer: null
    }
 },
  methods:{
    getCode(){
     const TIME_COUNT = 3;
     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)
      }
    }  
  }
}
</script>

点击查看原文