本人最近开始尝试学习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>
于是格式是没有问题了,但是样式并没有生效。变成了另一个样子。
上网上搜了很多。
有说是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实现验证码按钮倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]