//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. @Cacheable注解式缓存不起作用的情形

    @Cacheable注解式缓存使用的要点:正确的注解式缓存配置,注解对象为spring管理的hean,调用者为另一个对象.有些情形下注解式缓存是不起作用的:同一个bean内部方法调用,子类调用父类中有 ...

  2. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验四:按键模块③ — 单击与双击

    实验四:按键模块③ - 单击与双击 实验三我们创建了"点击"还有"长点击"等有效按键的多功能按键模块.在此,实验四同样也是创建多功能按键模块,不过却有不同的有效 ...

  3. 3D Slicer 4.7.0 VS 2010 Compile 编译

    花了将近一周的时间的,终于在VS2010成功的编译了最新版的3D Slicer 4.7.0,感觉快要崩溃了.Slicer用了20多个外部的库,全都要一起编译,完整编译一次起码要七八个小时,光VS的Ou ...

  4. mysql迁移sqlserver

    数据迁移的工具有很多,基本SSMA团队已经考虑到其他数据库到SQL Server迁移的需求了,所以已经开发了相关的迁移工具来支持. 此博客主要介绍MySQL到SQL Server数据迁移的工具:SQL ...

  5. day5 五、数字类型、字符串,列表类型的基本操作和内置方法

    一.可变与不可变 可变:值改变,但是id不变,证明就是在改变原值,是可变类型.它的原理是在内存里有一个值,然后这个值发生了改变,意为id地址是同一个,没有变化 # l=['a','b'] # prin ...

  6. 文本分类学习 (八)SVM 入门之线性分类器

    SVM 和线性分类器是分不开的.因为SVM的核心:高维空间中,在线性可分(如果线性不可分那么就使用核函数转换为更高维从而变的线性可分)的数据集中寻找一个最优的超平面将数据集分隔开来. 所以要理解SVM ...

  7. 动态环境下的slam问题如何解决?

    作者:颜沁睿链接:https://www.zhihu.com/question/47817909/answer/107775045来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  8. select cast(round(12.5,2) as numeric(5,2))

    http://www.jb51.net/article/74284.htm 解释: round()函数,是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置小数四舍五入的精度. )--32. ...

  9. 关于html中input组件间空隙的去除

    有空隙的时候的代码是这样的: <input type="text" name="search" title="请输入要搜索的内容" s ...

  10. 深度学习中的batch的大小对学习效果的影响

    Batch_size参数的作用:决定了下降的方向 极端一: batch_size为全数据集(Full Batch Learning): 好处: 1.由全数据集确定的方向能够更好地代表样本总体,从而更准 ...