基于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 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
原生js实现购物车功能
Sep 23 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
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
python实现的文件夹清理程序分享
2014/11/22 Python
windows系统下Python环境搭建教程
2017/03/28 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
基于django传递数据到后端的例子
2019/08/16 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python三引号如何输入
2020/07/06 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
化工专业应届生求职信
2013/11/08 职场文书
继承权公证书
2014/04/09 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
武侯祠导游词
2015/02/04 职场文书
企业安全生产规章制度
2015/08/06 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL