vue实现验证码倒计时60秒的具体代码

<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span> 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)
}
}
}

vue实现验证码倒计时60秒的具体代码的更多相关文章

  1. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  2. js实现倒计时60秒的简单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  3. jQuery实现发送验证码倒计时60秒

    前端HMTL: <div class="form_box"> <div class="line mb40"> <div class ...

  4. javaScript 验证码 倒计时60秒

    <input type="button" id="btn" value="免费获取验证码" /> <script type ...

  5. js 简单实现获取短信按钮倒计时60秒

    <!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content- ...

  6. iOS-验证码倒计时60秒

    一. 要求 1.点击获取验证码按钮,60秒倒计时,按钮变成不可点击状态,按钮文字变成倒计时的秒数. 2.当倒计时为0的时候,释放掉定时器NSTimer,按钮变成可以点击状态,按钮文字变成"获 ...

  7. Android 实现简单 倒计时60秒,一次1秒

    倒计时功能如上图所示,其实就几行代码即可实现效果啦!!! /** 倒计时60秒,一次1秒 */ CountDownTimer timer = new CountDownTimer(60*1000, 1 ...

  8. Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...

  9. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

随机推荐

  1. requirejs的使用和快速理解

    样例来自https://www.jianshu.com/p/b8a6824c8e07 requirejs有以下功能 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化 ...

  2. textarea 中的换行符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. python获取文件所在目录

    1.执行的python程序获取自己文件所在目录 import os,sys os.chdir(sys.path[0]); dir_name = os.path.abspath(os.path.join ...

  4. Python学习之旅(三十八)

    Python基础知识(37):访问数据库(Ⅱ) 二.MySQL MySQL是Web世界中使用最广泛的数据库服务器.SQLite的特点是轻量级.可嵌入,但不能承受高并发访问,适合桌面和移动应用.而MyS ...

  5. python语法_字典_字典操作

    字典:使用映射关系来存储数据的 数据类型 dict = {''name“:"gm","age":"34"} 采用键值对来存储数据 key_v ...

  6. String对象方法属性总结

    常用属性: constructor;length;prototype;(不在解释): 常用方法: charAt(index);返回指定位置的字符. concat(stringX);连接字符串. ind ...

  7. Linux命令 at cron

    at: 可以处理仅执行一次就结束排程的指令.需要atd服务 crontab: 所设定的指令将会循环地一直进行下去.需要crontab服务 at: Ubuntu16.04 默认没有安装atd服务.安装命 ...

  8. Python 模块定义、导入、优化详解

    一.定义 模块:用来从逻辑上组织 python 代码(变量,函数,类, 逻辑:实现一个功能),本质就是 .py 结尾的 python文件(例如:test.py文件,对应的模块名:test) 包:用来从 ...

  9. 《ABCD组团队》第二次作业

    ABCD组:二手车价格预测系统 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...

  10. python基础的学习

    今日内容 1.常见操作系 1.win win7 win10 window serrer 2.linux centons 图像界面差 upuntu 个人开发(图形化较好) redhat 企业 3.mac ...