vue führt einen Countdown für die Bestätigungscode-Schaltfläche durch

Dieses Mal werde ich Ihnen zeigen, worauf Sie beim Countdown für die Bestätigungscode-Schaltfläche mit Vue achten sollten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 {

Damit es dem Format des offiziellen Dokuments folgt, ändern Sie die js-Struktur in

<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 sich um ein Problem mit der js-Referenzreihenfolge handelt.

Es wird gesagt, dass js in window.onload geschrieben ist. Ich habe es versucht und festgestellt, dass alles falsch war.

Später wurde das el-Attribut in der offiziellen Dokumentation entdeckt: Bereitstellung eines Montageelements für die Instanz. Der Wert kann ein CSS-Selektor, ein tatsächliches HTML-Element oder eine Funktion sein, die ein HTML-Element zurückgibt.

Ändern Sie es also in

<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:

JS-Betrieb JSON-Array-Deduplizierung

So bedienen Sie die WeChat-Applet-API mit Versprechen

Das obige ist der detaillierte Inhalt vonvue führt einen Countdown für die Bestätigungscode-Schaltfläche durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!