基于Vue的时间倒计时DEMO

基于Vue的时间倒计时DEMO

html代码：

<div id="example">
    <button @click="send" v-bind:disabled="disabledCondition">
      <span v-if="sendMsgDisabled" >{{time+'秒后获取'}}</span>
      <span v-if="!sendMsgDisabled">send</span>
    </button>
  </div>

css代码：

  button {
    width: 100px;
    height: 50px background: pink;
  }

javascript代码：

var vm = new Vue({
    el: '#example',
    data() {
      return {
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,
        disabledCondition:false
      }
    },
    methods: {
      send() {
        let _this = this;
        _this.sendMsgDisabled = true;
        _this.disabledCondition = true;
        let interval = window.setInterval(function() {
          if ((_this.time--) <= 0) {
            _this.time = 60;
            _this.sendMsgDisabled = false;
            window.clearInterval(interval);
          }
        }, 1000);
      }
    }
  })

效果图:

原文地址：
http://blog.csdn.net/amberwu/article/details/72869616
原文Demo地址(可将本文下的代码放入其中测试):
https://jsfiddle.net/dtaym333/