//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 验证码倒计时的更多相关文章

  1. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

  2. vue获取验证码倒计时

    <template> <div> <el-button :disabled="disabled" @click="sendcode" ...

  3. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  4. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  5. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  6. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  7. iOS-实现验证码倒计时功能(1)

    验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...

  8. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  9. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

随机推荐

  1. DBeaver连接达梦数据库

    1.连接类型选择ODBC. 2.编辑驱动设置: 1)Class Name:dm.jdbc.driver.DmDriver 2)URL Template:jdbc:dm://{dbserver}/{da ...

  2. Scala断言

    断言:提供了一组断言函数以用作在代码中记录和动态检查不变量的方式. import scala.Predef._ def addNaturals(nats: List[Int]): Int = { // ...

  3. Flask web开发之路七

    今天写SQLAlchemy数据库 首先介绍ORM的概念: ORM,Object类,Relationship:关系,Mapping:映射,也就是模型关系映射 flask-sqlalchemy是一套ORM ...

  4. linux 部分系统命令

    在网上看到一些系统命令,贴一记 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # ...

  5. Hadoop开发环境配置2-eclipse集成maven插件

    1.下载eclipse:eclipse-SDK-4.5-win32-x86_64.zip 下载地址: http://archive.eclipse.org/eclipse/downloads/drop ...

  6. arcgisengine实现矩形转面

    面文件都有几何类型. arcengine在绘图时,不规则的多边形的几何类型是esriGeometryPolygon,矩形的几何类型是esriGeometryEnvelope,圆的几何类型是esriGe ...

  7. 【软件测试】Junit入门

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  8. iOS程序main函数之前发生了什么

    我是前言 一个iOS app的main()函数位于main.m中,这是我们熟知的程序入口.但对objc了解更多之后发现,程序在进入我们的main函数前已经执行了很多代码,比如熟知的+ load方法等. ...

  9. [network] IPVS / Load balancer / Linux Virtual Server

    Load Balancer IPVS: http://kb.linuxvirtualserver.org/wiki/IPVS NAT: http://kb.linuxvirtualserver.org ...

  10. [development][libhtp] libhtp 启用debug模式

    可以使用 ./configure --help 查看帮助. 可以通过参数, 修改配置. 即对应的Makefile内容. 也可以修改 configure.ac 里的内容, help中的部分内容, 也依赖 ...