zoukankan      html  css  js  c++  java
  • vue实现验证码倒计时

    template
       <span v-if="codeShow" @click="getPhoneCode">获取验证码</span>
       <span v-if="!codeShow">{{count}}秒后重试</span>
    
    script
    data(){
      return {
       codeShow: true,  //判断显示隐藏
       count: '',     //显示时的文字内容
       timer: null,    
      }
     },
     getPhoneCode() {
          //点击获取验证码
          const TIME_COUNT = 60;  //倒计时60秒
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.codeShow = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.codeShow = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        },
    
  • 相关阅读:
    闭包
    线程与进程
    异常处理
    socket编程
    面向对象编程
    模块
    正则表达式
    递归、二分查找、冒泡算法
    装饰器
    迭代器与生成器
  • 原文地址:https://www.cnblogs.com/mxnl/p/13569303.html
Copyright © 2011-2022 走看看