vue는 인증 코드 버튼 카운트다운을 만듭니다-JS 튜토리얼-php.cn

vue는 인증 코드 버튼 카운트다운을 만듭니다

php中世界最好的语言

풀어 주다： 2018-06-08 17:40:20

원래의

2277명이 탐색했습니다.

이번에는 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 {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

형식에 따라 오류를 보고하는 것을 발견했습니다. 공식 문서에서는 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 참조 순서에 문제가 있다고 합니다.