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. jq三级联动

    test.html <div class="a_list"> <div class="a_title">商城分类:</div> ...

  2. 前台js根据当前时间生成订单号

    *********前台显示框**************** <input type="text" id="WIDout_trade_no" name=& ...

  3. VIm快捷操作

    vim快捷操作 移动 行级移动 $ 行尾 0 行头 段级移动 { 段首 } 段尾 屏幕级别 L: 屏幕尾部 H: 屏幕头部 文档级别 G: 文档尾部 1G:头部 nG:文档n行 删除 dd: 删除当前 ...

  4. 壁虎书8 Dimensionality Reduction

    many Machine Learning problems involve thousands or even millions of features for each training inst ...

  5. python连接服务器上传文件,后台执行命令

    上传文件 import os import paramikoimport logging from django.core.cache import cache from YunTai import ...

  6. 关于反射和JVM的整理

  7. ASO的效果应该如何去评判,有什么标准可以量化指标

    ASO的效果应该如何去评判,有什么标准可以量化指标 以往我们主要会教大家怎么做 ASO 优化,优化中有什么技巧……在掌握ASO优化技巧之后,从执行层面来考虑,就该选择流量平台了. 目前市场上的流量平台 ...

  8. 【C++】满二叉树问题

    /* 给出一棵满二叉树的先序遍历,有两种节点:字母节点(A-Z,无重复)和空节点(#).要求这个树的中序遍历.输出中序遍历时不需要输出#. 满二叉树的层数n满足1<=n<=5. Sampl ...

  9. jQuery实现图片懒加载

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

  10. TPS6116x 1-wire总线的分析与驱动实现

    1-wire总线的特点 1-wire协议是用一条数据线作为总线进行数据通信的协议. 1-wire总线有以下特点: 1. 可以组建网络,个数没有限制. 2. 使用GPIO的特性就可以,不需要专门的控制器 ...