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

이번에는 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 참조 순서에 문제가 있다고 합니다.

어떤 사람들은 js가 window.onload에 작성되어 있다고 말합니다. 나는 그것을 시도했고 그것이 모두 잘못되었음을 알았습니다.

나중에 el 속성이 공식 문서에서 발견되었습니다: 인스턴스에 대한 마운팅 요소 제공. 값은 CSS 선택기, 실제 HTML 요소 또는 HTML 요소를 반환하는 함수일 수 있습니다.

그러니까 rrreee로 바꿔보시면 효과가 나올거에요.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료: 🎜🎜🎜JSON 배열에서 중복 항목을 제거하는 JS 작업🎜🎜🎜🎜🎜약속 WeChat 애플릿 API 작동 방법🎜🎜🎜

위 내용은 vue는 인증 코드 버튼 카운트다운을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!