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


Posted in Javascript onSeptember 13, 2017

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
node网页分段渲染详解
Sep 05 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
微信小程序自定义组件
Aug 16 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
使用javascript解析二维码的三种方式
Nov 11 Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
You might like
用libTemplate实现静态网页的生成
2006/10/09 PHP
php标签云的实现代码
2012/10/10 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python爬取读者并制作成PDF
2015/03/10 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python对于requests的封装方法详解
2019/01/03 Python
利用nohup来开启python文件的方法
2019/01/14 Python
django教程如何自学
2020/07/31 Python
Python运算符+与+=的方法实例
2021/02/18 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
关于运动会的口号
2014/06/07 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis