欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

制作一个基于vue的倒计时demo

程序员文章站 2022-03-21 23:17:04
...
HTML:
 <p id="example">
    <button @click="send">
      <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
      <span v-if="!sendMsgDisabled">send</span>
    </button>
  </p>

JS:

var vm = new Vue({
    el: '#example',
    data() {      return {
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false
      }
    },
    methods: {
      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);
      }
    }
  })

以上就是制作一个基于vue的倒计时demo 的详细内容,更多请关注其它相关文章!