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><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 {
<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>
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>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!
