ホームページ > 記事 > ウェブフロントエンド > vueは検証コードカウントダウン機能を実装します
今回はvueでの認証コードカウントダウン関数の実装についてお届けします。vueで認証コードカウントダウン関数を実装する際の注意点
は何なのか、実際の事例を見てみましょう。 。 オンラインで検索してコードを試してみましたが、多くの問題が発生しました。したがって、後で他の人が落とし穴に陥らないように、基本的な紹介記事を書く必要があります。 これはオンラインで書かれた HTML ページに従って js で書かれています<p class="register-pannel" id ="register-pannel"> <p class="register-l" align="center"> <p 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" /> </p> <br /> <p class="input-group" style="width: 300px;"> <input type="text" class="form-control" placeholder="密码" style="height: 40px;" /> <span class="glyphicon glyphicon-lock form-control-feedback" /> </p> <br /> <p class="input-group" style="width: 300px;"> <input type="text" class="form-control" placeholder="手机号" style="height: 40px;" /> <span class="glyphicon glyphicon-phone form-control-feedback" /> </p> <br /> <p 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" /> </p> <br /> <span class="btn-register">注册</span> </p>
<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
ブラウザがエラー Uncaught SyntaxError: Unexpected token {
を報告し続けることがわかりました
したがって、次の形式に従っています公式ドキュメント、jsの構造変更OK
<script> new Vue({ el:'.register-pannel', //注册p的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>
なので形式的には問題ないのですが、スタイルが反映されません。それは別のものになりました。
インターネットで色々調べました。
jsにおける
の参照順序に問題があると言われています。js は window.onload
に書かれているという人もいます。試してみたところ、すべてが間違っていることがわかりました。
その後、インスタンスのマウント要素を提供する el 属性が公式ドキュメントで発見されました。値には、CSS セレクター、実際の HTML 要素、または HTML 要素を返す関数を指定できます。
それでrrreeeに変更すると効果が出ます。
以上がvueは検証コードカウントダウン機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。