基于vue、react实现倒计时效果

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

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

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

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

time = () => {    this.setState({       times: this.state.times-1,      btnText: '' + this.state.times + 's重新发送)',      // discodeBtn: false,      clearInterval:true    })    var siv = setInterval(() => {      this.setState({         times: this.state.times-1,        btnText: '' + this.state.times + 's重新发送)',        // discodeBtn: false,        clearInterval:true      }, () => {        if (this.state.times === 0) {          clearInterval(siv);          this.setState({             times: 60,            btnText: '发送验证码',             // discodeBtn: true,            clearInterval:false,            phone:false,            isDisabled:false          })        }      });    }, 1000);  };<button className={(this.state.clearInterval ? 'send-btn-disabled-m' : 'send-btn-default')} disabled={this.state.isDisabled} onClick={this.getPhone} >{this.state.btnText}</button>