基于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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
Vue 项目分环境打包的方法示例
Aug 03 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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 array_multisort()函数的使用札记
2011/07/03 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python实现注册、登录小程序功能
2018/09/21 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
策划助理岗位职责
2013/11/18 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
加薪通知
2015/04/25 职场文书