基于vue的倒计时demo

方案一：俩个元素

HTML：

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

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);      }    }  })  

方案二：一个元素，改变文字

HTML：

<button type="button" @click='delusercache()' :disabled="sendMsgDisabled" v-text="btnText"></button>//倒计时按钮禁用:disabled="sendMsgDisabled

JS：

var vm = new Vue({    el: '#example',    data() {      return {        time: 60, // 发送验证码倒计时        sendMsgDisabled: false //按钮可用      }    },    methods: {     time(){            this.sendMsgDisabled= true; //按钮不可用            let interval = window.setInterval(()=> {                this.btnText = this.s + 's重新发送'                if ((this.s--) <= 0) {                    this.s = 120;                    this.btnText ='发送验证码'                    this.sendMsgDisabled= false; //按钮可用                    window.clearInterval(interval);                }            }, 1000);        }  })