Vue实现获取验证码倒计时

原创 2018年04月15日 15:57:19

这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

HTML部分:

<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>

JS部分:

data(){
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 methods:{
   getCode(){
     const TIME_COUNT = 60;
     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)
      }
   
 }

VUE获取验证码倒计时

登录界面使用手机验证码注册登录很常见,VUE中实现获取验证码倒计时还是用到定时器setInterval 先上效果图 HTML部分 短信验证码: ...
  • wangqin2734
  • wangqin2734
  • 2017-12-05 11:42:55
  • 607

vue 验证码倒计时60s

vue 验证码倒计时
  • Zhooson
  • Zhooson
  • 2017-07-17 14:19:17
  • 4686

vue获取手机验证码60秒倒计时,不能点击按钮

vue获取手机验证码60秒倒计时,不能点击按钮export const resend = element => { console.log(element) var num = 60 va...
  • a419419
  • a419419
  • 2017-08-29 21:03:43
  • 2867

简单实现vue验证码60秒倒计时功能

&amp;lt;span v-show=&quot;show&quot; @click=&quot;getCode&quot;&amp;gt;获取验证码&amp;lt;/span&amp;gt;&am...
  • qq_32963841
  • qq_32963841
  • 2018-02-22 09:58:12
  • 113

VUE发送短信倒计时组件代码

组件源码 0">{{ text }} export default{ props: {         second: {             type: Numb...
  • suixaingjun
  • suixaingjun
  • 2017-07-06 11:58:18
  • 2196

vueJS+bootstrap+html5验证码倒计时

  • 2016年10月12日 17:51
  • 659KB
  • 下载

移动端短信验证码详解(二)—— 倒计时

移动端短信验证码详解(一) 这一章,主要讲解倒计时的实现方法。 验证码发送倒计时一般为60秒,看代码 &amp;lt;span v-if=&quot;show_btn&quot; clas...
  • mhlghy
  • mhlghy
  • 2017-03-29 09:19:03
  • 1161

vue 短信验证码UI

返回
  • lvlemo
  • lvlemo
  • 2017-11-20 15:24:24
  • 176

js获取验证码倒计时如何实现

方案一: $(function(){ $(".generate_code").click(function(){ var disabled = $(".ge...
  • hj7jay
  • hj7jay
  • 2016-05-17 09:58:23
  • 4062

Vue中验证码计时器的制作

关键技术: setInterval clearInterval ヽ(●-`Д´-)ノ 由于setInterval不能传递参数,导致不能直接通过参数来完成计时器。 我才用的方式为改变DOM,通...
  • insistlzh
  • insistlzh
  • 2017-07-06 11:13:28
  • 2172
收藏助手
不良信息举报
您举报文章:Vue实现获取验证码倒计时
举报原因:
原因补充:

(最多只允许输入30个字)