//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. fiddler配置手机抓包

    参考:https://blog.csdn.net/gld824125233/article/details/52588275 注:我内部用,没有https,不用配置https证书.

  2. OpenGL——二维几何变换

    平移.旋转.缩放的实现 #include<iostream> #include <math.h> #include<Windows.h> #include < ...

  3. C#自定义按钮、自定义WinForm无边框窗体、自定义MessageBox窗体

    C#自定义按钮.自定义WinForm无边框窗体.自定义MessageBox窗体 C#自定义Button按钮控件 效果展示 C#自定义Winform无边框窗体 效果展示 C#自定义无边框MessageB ...

  4. 深度学习(TensorFlow)环境搭建:(一)硬件选购和主机组装

    一.硬件采购 近年来,人工智能AI越来越多被人们所了解,尤其是AlphaGo的人机围棋大战之后,机器学习的热潮也随之高涨.最近,公司采购了几批设备,通过深度学习(TensorFlow)来研究金融行业相 ...

  5. [原]jenkins(六)---jenkins远程部署脚本

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/533 ...

  6. limits.conf文件修改注意事项

    limits.conf文件限制着用户可以使用的最大文件数,最大线程,最大内存等资源使用量. vim /etc/security/limits.conf * soft nofile * hard nof ...

  7. 转载:浅析@PathVariable 和 @RequestParam

    在网上看了一篇很好的文章,讲的很清楚明了,说到了点子上(转自:https://blog.csdn.net/chuck_kui/article/details/55506723): 首先 上两个地址: ...

  8. 进程池的map方法

    from multiprocessing import Process,Pool def f1(n): for   i   in range(10): n = n+1 if  __name__ == ...

  9. iOS FMDB的是使用和注意事项

    1.FMDB 默认的使用方法不是线程安全的. 2.Sqlite 默认不支持外键. 3.Sqlite 不支持用 ALTER 关键字给已有表添加外键约束 解决: 1.FMDBDatabaseQueue 2 ...

  10. day4:数据结构list

    1,一直输入用户名,输入Q退出,注意用户的输入别忘了加strip,和upper不区分大小写,list最后一位添加append li = [] while 1: name = input("& ...