vue makes verification code button countdown

This time I will bring you what to pay attention to when making a verification code button countdown with Vue. The following is a practical case, let’s take a look.

I searched online and tried their code, but I encountered many problems. Therefore, it is necessary to write a basic introductory article to avoid pitfalls for others later.

This is written in js according to the HTML page written on the Internet

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

I found that the browser keeps reporting errors

Uncaught SyntaxError: Unexpected token {

So according to the format of the official document, change the js structure to

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

Then the format is no problem, but the style does not take effect. It became something else.

I searched a lot on the Internet.

It is said that it is a problem with the js reference order.

It is said that js is written into

window.onload

. I tried it and found that it was all wrong. Later, the el attribute was discovered in the official documentation: providing a mounting element for the instance. The value can be a CSS selector, an actual HTML element, or a function that returns an HTML element.

So change it to

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

and the effect will come out.

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS operation to remove duplicates from JSON array

How to operate the WeChat applet api with promise

The above is the detailed content of vue makes verification code button countdown. For more information, please follow other related articles on the PHP Chinese website!