Heim > Artikel > Web-Frontend > vue implementiert die Countdown-Funktion für den Bestätigungscode
Dieses Mal werde ich Ihnen die Implementierung der Countdown-Funktion Bestätigungscode in Vue vorstellen. Welche Vorsichtsmaßnahmen gibt es für die Implementierung der Countdown-Funktion des Bestätigungscodes? Vue. Das Folgende ist ein praktischer Fall.
Ich habe online gesucht und ihren Code ausprobiert, bin aber auf viele Probleme gestoßen. Daher ist es notwendig, einen grundlegenden Einführungsartikel zu schreiben, um spätere Fallstricke für andere zu vermeiden. Dies ist gemäß der online geschriebenen HTML-Seite in js geschrieben<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>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>Ich habe festgestellt, dass der Browser ständig Fehler meldet
Uncaught SyntaxError: Unexpected token {
<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>, sodass das Format kein Problem mehr darstellt, der Stil jedoch nicht wirksam wird. Es wurde etwas anderes. Ich habe viel online gesucht. Es wird gesagt, dass es ein Problem mit der Reihenfolge der js
Referenzierung ist.
Es wird gesagt, dass js in geschrieben ist. Ich habe es versucht und festgestellt, dass es falsch war. window.onload
<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>und der Effekt wird sichtbar. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte zur Installation von npm in vue.js
Wie man damit umgeht 302-Statuscode in Axios
Das obige ist der detaillierte Inhalt vonvue implementiert die Countdown-Funktion für den Bestätigungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!