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 ...
随机推荐
- Visual Studio(C#)快捷键与Eclipse(JAVA)快捷键对比
Visual Studio与Eclipse快捷键对比 Visual Studio Eclipse 代码提示: Ctrl+J Ctrl+空格键 / Alt+/ .abcdefghijklmnopqr ...
- kubernetes 创建nginx 容器
参考:http://blog.csdn.net/qq1010885678/article/details/48832067 一个简单的nginx服务器 先决条件:你需要拥有的是一个部署完毕并可以正常运 ...
- Saltstack设置安装源为阿里源
Saltstack设置安装源为官方源有时候在国内网络不好安装较慢或者安装不上,可设置为阿里源 比如对于 Centos 7 系统,在 saltstack 的官网提供的配置初始化手册是: sudo yum ...
- 转:关于ROWNUM的使用
转载自:原文:https://blog.csdn.net/songsenkeji/article/details/4432942 ROWNUM的概念ROWNUM是一个虚假的列.它将被分配为 1,2,3 ...
- SMB服务简介
1.Samba简介 Samba是种自由软件,用来让UNIX系列的操作系统与微软Windows操作系统的SMB/CIFS(Server Message Block/Common Internet F ...
- [No0000134]C#中的委托,匿名方法和Lambda表达式
简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...
- [No0000FD]C# 正则表达式
正则表达式 是一种匹配输入文本的模式..Net 框架提供了允许这种匹配的正则表达式引擎.模式由一个或多个字符.运算符和结构组成. 定义正则表达式 下面列出了用于定义正则表达式的各种类别的字符.运算符和 ...
- [No0000B6]C#中 ==与equals的区别
using System; internal class Person { public Person(string name) { Name = name; } public string Name ...
- 区块链共识机制:POW、POS、DPOS、PBFT、POOL
共识机制作为区块链的关键技术之一,在业务吞吐量.交易速度.不可篡改性.准入门槛等等方面发挥重要的作用. 区块链是去中心化的,没有中心记账节点,所以需要全网对账本达成共识.目前有POW.POS.DPOS ...
- SSH 结构中 不同角色登录,显示不同的菜单
关于这个功能,这里也就是提供一个思路,在做项目的时候因为要用到,肯定存在更好的方法,此思路仅供参考. 一.关于前台页面的接收方式 这里使用struts2的标签: <s:iterator valu ...