简单实现vue验证码60秒倒计时功能


Posted in Javascript onOctober 11, 2017

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下

html

<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>

js

data(){
 return {
 show: true,
 count: '',
 timer: null,
 }
 },
 methods:{
 getCode(){
  const TIME_COUNT = 60;
  if (!this.timer) {
  this.count = TIME_COUNT;
  this.show = false;
  this.timer = setInterval(() => {
  if (this.count > 0 && this.count <= TIME_COUNT) {
   this.count--;
   } else {
   this.show = true;
   clearInterval(this.timer);
   this.timer = null;
   }
  }, 1000)
  }
 } 
 }

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 #Javascript
JS随机排序数组实现方法分析
Oct 11 #Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 #Javascript
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
You might like
php xml文件操作实现代码(二)
2009/03/20 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JS跨域问题详解
2014/11/25 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
详解react-redux插件入门
2018/04/19 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue debug 二种方法
2018/09/16 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
python smtplib发送带附件邮件小程序
2018/05/22 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
医院总经理岗位职责
2014/02/04 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
个人承诺书格式
2014/06/03 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
经营场所证明范本
2015/06/19 职场文书
志愿者工作心得体会
2016/01/15 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL