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. 微信公众号_订阅号_爬虫puppeteer

    puppeteer 借助 puppeteer 库实现爬虫,puppeteer 提供了高级 api 接口来操作 chrome 来 npm install puppeteer --save-dev    ...

  2. three.js 使用DragControls.js 拖动元素

    首先,引入js文件: <script type="text/javascript" src="./path/to/DragControls.js"> ...

  3. mysql百万级全文索引及match快速查找

    建立全文索引的表的存储引擎类型必须为MyISAM 问题是match   against对中文模糊搜索支持不是太好 新建一个utf8 MyISAM类型的表并建立一个全文索引  : CREATE TABL ...

  4. onu-reg-unreg.vbs

    Sub Main crt.Sleep 10000 Dim cnt For cnt = 0 To 1000000 crt.screen.Send "admin-status down" ...

  5. Notepad++ 64位 插件管理器 PluginManager 安装 更新

    32位的自带不多说,64位的内置不带,需要自己去找,这里给个地址: https://github.com/bruderstein/nppPluginManager/releases 地址里面有64位管 ...

  6. oracle DML语句 事务的定义与特点

    1.insert into (插入数据) insert in to  表名(列表1,列表2)    values(要插入的数据1,数据2); or insert into 表名   values(数据 ...

  7. tableview Footerview有多余的间距

    调整footerView的高度 UIView *footerV = [[UIView alloc] initWithFrame:CGRectMake(, , Main_Screen_Width, )] ...

  8. flask学习笔记(1)-虚拟环境安装

    Mac(类Linux): pip install virtualenv mkdir testvirtualenv cd testvirtualenv virtualenv flask-env#创建虚拟 ...

  9. 使用Eclipse来操作HDFS的文件

    一.常用类 1.Configuration Hadoop配置文件的管理类,该类的对象封装了客户端或者服务器的配置(配置集群时,所有的xml文件根节点都是configuration) 创建一个Confi ...

  10. Github 入门(“趣考网络”学习第一步)

    目录 为什么要使用GitHub 下载Github Desktop fork 与 pull request git pull,fetch,merge,push的区别与联系 git clone 与 dow ...