Make a countdown demo based on vue

HTML：

 <p id="example">
    <button @click="send">
      <span v-if="sendMsgDisabled">{{time+&#39;秒后获取&#39;}}</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);
      }
    }
  })

The above is the detailed content of Make a countdown demo based on vue. For more information, please follow other related articles on the PHP Chinese website!