如何实现基于vue的短信验证码倒计时

小编给大家分享一下如何实现基于vue的短信验证码倒计时，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一般获取短信验证码的时候会用到这个demo：

button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时：

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

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

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的短信验证码倒计时”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！