zoukankan      html  css  js  c++  java
  • vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码

    <span v-show="show" @click="getCode">获取验证码</span>
    <span v-show="!show" class="count">{{count}} s</span>
    
    data(){
      return {
       show: true,
       count: '',
       timer: null,
      }
     },
     methods:{
       getCode(){
         const TIME_COUNT = 60;
         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)
          }
       }  
     }
  • 相关阅读:
    es6
    ES6
    ES6
    css3
    滚动穿透的6种解决方案【已自测】
    css特效
    css布局
    css布局
    js
    【消灭代办】第5周
  • 原文地址:https://www.cnblogs.com/zdz8207/p/vue-countdown-60s.html
Copyright © 2011-2022 走看看