vue实现验证码按钮倒计时功能


Posted in Javascript onApril 10, 2018

本人最近开始尝试学习vue.js。想使用vue写一个小例子,就选择做验证码按钮倒计时功能。

    上网上搜了一下,也把他们的代码试了一下,自己出了很多问题。所以,需要写一篇基础入门的文章,避免后面人采坑。

   这是按照网上写的HTML页面

<div class="register-pannel" id ="register-pannel"> 
      <div class="register-l" align="center"> 
        <div class="input-group" style="width: 300px;"> 
          <input type="text" class="form-control" placeholder="邮箱/手机号/用户名" style="height: 40px;" /> 
          <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true" /> 
        </div> 
        <br /> 
        <div class="input-group" style="width: 300px;"> 
          <input type="text" class="form-control" placeholder="密码" style="height: 40px;" /> 
          <span class="glyphicon glyphicon-lock form-control-feedback" /> 
        </div> 
        <br /> 
        <div class="input-group" style="width: 300px;"> 
          <input type="text" class="form-control" placeholder="手机号" style="height: 40px;" /> 
          <span class="glyphicon glyphicon-phone form-control-feedback" /> 
        </div> 
        <br /> 
        <div class="input-group" style="width: 300px;"> 
            <span class="register-msg-btn" v-show="show" v-on:click="getCode">发送验证码</span> 
            <span class="register-msg-btn" v-show="!show">{{count}} s</span> 
          <input type="text" class="form-control" placeholder="验证码" style="float: right; height: 40px; width: 150px;" /> 
          <span class="glyphicon glyphicon-font form-control-feedback" /> 
        </div> 
        <br /> 
        <span class="btn-register">注册</span> 
      </div>

js写成

<script> 
<span style="white-space: pre;">      </span>data(){   
<span style="white-space: pre;">      </span>return {   
<span style="white-space: pre;">        </span>show: true,   
<span style="white-space: pre;">        </span>count: '',   
<span style="white-space: pre;">        </span>timer: null,   
<span style="white-space: pre;">      </span>}  
<span style="white-space: pre;">    </span>},  
<span style="white-space: pre;">    </span>methods:{   
<span style="white-space: pre;">      </span>getCode(){    
<span style="white-space: pre;">        </span>const TIME_COUNT = 60;    
<span style="white-space: pre;">        </span>if (!this.timer) {     
<span style="white-space: pre;">          </span>this.count = TIME_COUNT;     
<span style="white-space: pre;">          </span>this.show = false;     
<span style="white-space: pre;">          </span>this.timer = setInterval(() => {     
<span style="white-space: pre;">            </span>if (this.count > 0 && this.count <= TIME_COUNT) {      
<span style="white-space: pre;">              </span>this.count--;      
<span style="white-space: pre;">            </span>} else {      
<span style="white-space: pre;">              </span>this.show = true;      
<span style="white-space: pre;">              </span>clearInterval(this.timer);      
<span style="white-space: pre;">              </span>this.timer = null;      
<span style="white-space: pre;">            </span>}     
<span style="white-space: pre;">          </span>}, 1000)     
<span style="white-space: pre;">        </span>}   
<span style="white-space: pre;">      </span>}   
<span style="white-space: pre;">    </span>} 
</script>

发现浏览器一直报错Uncaught SyntaxError: Unexpected token {

所以按照官方文档的格式,把js的结构改成

<script> 
    new Vue({ 
      el:'.register-pannel',      
      data:{    
        show:true,   
        timer:null, 
        count:'' 
      },  
      methods:{   
        getCode(){ 
          this.show = false; 
          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)     
          }   
        }   
      } 
    }); 
    </script>

于是格式是没有问题了,但是样式并没有生效。变成了另一个样子。

vue实现验证码按钮倒计时功能

上网上搜了很多。

有说是js引用顺序的问题。

有说是将js写进window.onload的。试了一下,发现都不对。

后来,在官方文档中发现了el属性:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。

所以改成

<script>
 new Vue({
  el:'.register-pannel', //注册div的class 
  data:{   
  show:true,  
  timer:null,
  count:''
  }, 
  methods:{  
  getCode(){
   this.show = false;
   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)    
   }  
  }  
  }
 });
</script>

效果就出来了。

vue实现验证码按钮倒计时功能

总结

以上所述是小编给大家介绍vue实现验证码按钮倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
vuex存储token示例
Nov 11 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue 微信授权登录解决方案
Apr 10 #Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 #Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 #Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 #Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 #Javascript
bing Map 在vue项目中的使用详解
Apr 09 #Javascript
详解Vue打包优化之code spliting
Apr 09 #Javascript
You might like
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
splice slice区别
2006/10/09 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python图像常规操作
2017/11/11 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python简易版图书管理系统
2019/08/12 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
大学生秋游活动方案
2014/02/17 职场文书
入职担保书范文
2014/05/21 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
考研导师推荐信范文
2015/03/27 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技