基于vue的短信验证码倒计时demo

来源：懂视网责编：小采时间：2020-11-27 22:30:15

基于vue的短信验证码倒计时demo

基于vue的短信验证码倒计时demo:最近做了一个小的demo，分享给大家，在很多地方都能用到。一般获取短信验证码的时候会用到这个demo： button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时： <div id=example> <button @click

推荐度：

点击下载本文 文档为doc格式

导读基于vue的短信验证码倒计时demo:最近做了一个小的demo，分享给大家，在很多地方都能用到。一般获取短信验证码的时候会用到这个demo： button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时： <div id=example> <button @click

最近做了一个小的demo，分享给大家，在很多地方都能用到。

一般获取短信验证码的时候会用到这个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);
 }
 }
 })

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于vue的短信验证码倒计时demo

推荐度：

点击下载本文 文档为doc格式

标签： VUE 短信验证码倒计时

热门焦点

基于vue的短信验证码倒计时demo

基于vue的短信验证码倒计时demo

基于vue的短信验证码倒计时demo

最新推荐

猜你喜欢

热门推荐