基于vue的倒计时demo

来源:互联网 发布:餐厅排号软件 编辑:程序博客网 时间:2024/05/16 09:41

一般获取短信验证码的时候会用到这个呆毛:

这里写图片描述

button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时:

    <button @click="send">      <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>      <span v-if="!sendMsgDisabled">send</span>    </button>
      send() {        let me = this;        me.sendMsgDisabled = true;        let interval = window.setInterval(function() {          if ((me.time--) <= 0) {            me.time = 60;            me.sendMsgDisabled = false;            window.clearInterval(interval);          }        }, 1000);      }

线上完整代码请戳戳戳戳戳

原创粉丝点击