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. 归并排序&&归并排序求逆序对

    归并排序 归并排序(MERGE-SORT)是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序 ...

  2. [LeetCode] Minimum Distance Between BST Nodes 二叉搜索树中结点的最小距离

    Given a Binary Search Tree (BST) with the root node root, return the minimum difference between the ...

  3. Docker简介以及使用docker搭建lnmp的过程(多PHP版本)

    一.Docker基础 Docker安装 Docker 要求 Ubuntu 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的 Ubuntu 版本是否支持 Docker. 通过 uname ...

  4. TP5在前端时间戳转换为时间格式

     value="{:date('Y-m-d H:i:s',$data['add_date'])}"  例如: <td>{:date('Y-m-d H:i:s',$d[' ...

  5. NSTextField/NSTextView中显示超链接以及NSMutableAttributedString用法

    扩展NSAttributedString 简单的实现方法是为NSAttributedString 添加一个category. 然后为此category添加额外的方法. 具体实现如下: [代码]c#/c ...

  6. 如何设置记事本( .txt文件)的默认编码为UTF-8?

    1.在桌面新建一个文本文档,不要写入任何内容,然后手动另存为,将此文档编码改为UTF-8,然后将文件名字改为template.txt: 2.再将template.txt移动到C:\Windows\Sh ...

  7. CPU漏洞补丁KB4056892 卸载及忽略办法

    2018.1.4微软发布了针对intel CPU漏洞的补丁 KB4056892 性能降低不说, 针对一般平民根本没多大意义, 另外还会导致一些软件无法正常使用, (我是使用蓝叠经典版, 启动就会蓝屏) ...

  8. mysql技巧

    SELECT id,is_deleted,position,1/position as p,status FROM application.view_entry order by p desc;.// ...

  9. 2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165336 Exp2 后门原理与实践 1.基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 下载自己不熟悉的软件时含有病毒. 网络钓鱼, ...

  10. socket通信的遇到的问题1

    /*使用select对fd可读写,格式*/ while(ctrl){ //// FD_ZERO(&readSocketSet); FD_SET(readSocketFd,&readSo ...