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 ...
随机推荐
- js添加事件处理程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ALTER SEQUENCE 导致 REPLICAT 延时
1.查看OGG线程状态 GGSCI (klcoredb-node1) 46> info all Program Status Group Lag at Chkpt Time Since Chkp ...
- 170824、storm 环境搭建
/*********************storm 环境搭建 **********************/ 1 安装jdk1.7 2 安装zookeeper集群环境 3 安装Python2.6. ...
- PAT甲级1060 Are They Equal【模拟】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805413520719872 题意: 给定两个数,表示成0.xxxx ...
- IP地址、MAC地址及端口
概述: IP 是地址,有定位功能(网与网的通讯) (在逻辑上唯一标识一台电脑)(网络层) MAC 是身份证,无定位功能(在子网干活)(在物理上唯一标识一台电脑) (链路层) 首先是如何查看ip ...
- php之code tips
使用list来实现一次获取explode后的特定段值: list( , $mid) = explode(';', $string); 使用NULL === 来代替is_null: is_null和 N ...
- CSS盒子模型(简要了解)
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- innodb表锁情况
MySQL InnoDB默认行级锁.行级锁都是基于索引的 行级锁变为表级锁情况如下: 1.如果一条SQL语句用不到索引是不会使用行级锁的,会使用表级锁把整张表锁住. 2.表字段进行变更. 3.进行整表 ...
- flask框架詳解
https://www.cnblogs.com/sss4/p/8097653.html 前言: Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form. ...
- SQLAlchemy中时间格式化及将时间戳转成对应时间的方法-mysql
https://blog.csdn.net/guoqianqian5812/article/details/80175866 方法很简答,都是借助于mysql数据库提供的函数将时间格式化方法 func ...