vue 验证码倒计时
//html
<div class="input-div" v-show="formData.phone">
<input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="验证码">
<button @click="getCode(formData)" class="code-btn" :disabled="!show">
<span v-show="show">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>
</button>
</div>
//js
const TIME_COUNT = 60;
data(){
return {
formData: {
phone:'',
code:'',
},
show: true,
count: '',
timer: null,
}
}, methods:{
getCode(formData){
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)
}
}
}
https://blog.csdn.net/Zhooson/article/details/75228666
vue 验证码倒计时的更多相关文章
- vue实现验证码倒计时60秒的具体代码
vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...
- vue获取验证码倒计时
<template> <div> <el-button :disabled="disabled" @click="sendcode" ...
- jQuery获取短信验证码+倒计时实现
jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...
- Andorid实现点击获取验证码倒计时效果
这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...
- js 验证码 倒计时60秒
js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
- iOS-实现验证码倒计时功能(1)
验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...
- iOS 短信验证码倒计时按钮的实现
验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...
- Android 获取验证码倒计时实现
Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
随机推荐
- linux 几个命令
tail: tail -20 xxx --查看xxx文件的最后20行 more:分页查看,只能向后,不能向前 less:查看文件,可向前,向后,用的比较多 ll -h|more:当文件较多时,可以通 ...
- Orleans学习总结(五)--监控篇
上篇说完了Orleans学习总结(四)--集群配置篇,这次我们来说下监控 Orleans有一个强大的社区,为Orleans开发着各种各样的扩展工具,我们用的是OrleansDashboard.Dash ...
- centos7上设置中文字符集
author: headsen chen date: 2019-03-14 09:00:31 Linux系统会默认使用英文字符集,不会安装中文字符集等其他字符. 公司内部文件服务器等需要中文 ...
- word2016怎么让目录索引显示在左边?
视图里面 勾选导航窗格即可 前提是你分级分好
- print 与标准输出
print会自动添加换行符 其它的,没什么区别.有时候为了使用灵活,才会这么用. 例如你想把print的内容写向一下log文件,你可以这么做 stdout_bk = sys.stdout #备份一下标 ...
- ThinkPHP框架 3.2.2 获取系统常量信息 连接数据库 命名空间的理解
获取系统常量信息 随便一个方法里加上这句话都能获取到系统常量信息!! var_dump(get_defined_constants()); <?php namespace Admin\Contr ...
- 异常详细信息: System.ArgumentException: 不支持关键字: “metadata”。
ASP.NET MVC中报的一个错误... 异常详细信息: System.ArgumentException: 不支持关键字: “metadata”. 其实这个是我修改web.config文件造成的, ...
- arcgisengine实现矩形转面
面文件都有几何类型. arcengine在绘图时,不规则的多边形的几何类型是esriGeometryPolygon,矩形的几何类型是esriGeometryEnvelope,圆的几何类型是esriGe ...
- #include<stdio.h> #include "stdio.h"
https://baike.baidu.com/item/#include <stdio.h> #include <stdio.h> 编辑 #include<stdio. ...
- extundelete fuser
[extundelete ] fuser -mv /dev/sda6 https://blog.csdn.net/xwl145/article/details/38896699 多列排序[sort]h ...