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 ...
随机推荐
- Python实现C代码统计工具(四)
目录 Python实现C代码统计工具(四) 标签: Python 计时 持久化 声明 运行测试环境 一. 自定义计时函数 1.1 整个程序计时 1.2 代码片段计时 1.3 单条语句计时 二. 性能优 ...
- 排查java进程cpu占用高的问题
一.思路 分两步,主要是找出占用cpu高的进程,再找出该进程内到底是哪个线程占用cpu高. 二.找出占用cpu高的进程 参考: https://blog.csdn.net/hfhwfw/article ...
- 比例尺与DEM空间分辨率
我国 4 种比例尺 DEM 及其空间分辨率的对应关系: 1:100 万 DEM -- 1000m 空间分辨率: 1:25 万 DEM -- 100m 空间分辨率: 1:5 万 DEM ...
- thinkphp中setInc、setDec方法
可用于统计字段(通常是数字类型的字段)的更新,例如积分,等级,登陆次数等 必须配合连贯操作where一起使用 score 是数据库指定的某个字段 $User = M("User" ...
- ifnull与nvl
mysql 用 ifnull ,oracle没有ifnull 但是有相应的替换函数 nvl NVL(eExpression1, eExpression2)
- xml配置
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name=& ...
- db2命令参数with ur
查询DB2数据库,老遇到select * from XXX with ur, 好奇ur是什么作用(转) DB2中,共有四种隔离级:RS,RR,CS,UR,DB2提供了这4种不同的保护级别来隔离数据. ...
- Caused by: org.postgresql.util.PSQLException: ERROR: operator does not exist: character varying = integer
Springboot项目,使用postgresql数据库,mybatis做持久层框架, <select id="select" resultMap="BaseRes ...
- Javascript扩展Date的prototype实现时间format函数 2017-06-29T09:10:00.000Z日期转换
/*时间格式化 公用方法*/ Date.prototype.format = function(fmt) { // var o = { "M+": this.getMonth() ...
- [No0000161]IDEA初步接触
安装 参考https://blog.csdn.net/qq_35246620/article/details/61191375 安装过程全程默认(路径和快捷方式自定义,不需要下载jre): 启动后全程 ...