基于vue的短信验证码倒计时demo
更新时间：2017年09月13日 14:30:24 作者：AmberWu
这篇文章主要介绍了基于vue的短信验证码倒计时demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
最近做了一个小的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);
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue使用element-ui的el-image的问题分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
详解vue-cli+element-ui树形表格(多级表格折腾小计)
这篇文章主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本篇文章主要介绍了浅谈在vue项目中如何定义全局变量和全局函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要为大家详细介绍了vue实现带放大镜的搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue3基于script setup语法$refs的使用，<BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>2021-12-12
这篇文章主要为大家详细介绍了如何通过vue3和vite实现在线预览pdf功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下2023-10-10
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库2022-12-12
这篇文章主要为大家详细汇总了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了vue3中的createApp分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
最新评论