vueは検証コードカウントダウン機能を実装します

今回はvueでの認証コードカウントダウン関数の実装についてお届けします。vueで認証コードカウントダウン関数を実装する際の注意点

は何なのか、実際の事例を見てみましょう。 。

オンラインで検索してコードを試してみましたが、多くの問題が発生しました。したがって、後で他の人が落とし穴に陥らないように、基本的な紹介記事を書く必要があります。

これはオンラインで書かれた HTML ページに従って js で書かれています

<p> 
      </p><p> 
        </p><p> 
          <input> 
          <span></span> 
        </p> 
        <br> 
        <p> 
          <input> 
          <span></span> 
        </p> 
        <br> 
        <p> 
          <input> 
          <span></span> 
        </p> 
        <br> 
        <p> 
            <span>发送验证码</span> 
            <span>{{count}} s</span> 
          <input> 
          <span></span> 
        </p> 
        <br> 
        <span>注册</span> 
      

<script> 
<span style="white-space: pre;">      data(){   
<span style="white-space: pre;">      return {   
<span style="white-space: pre;">        show: true,   
<span style="white-space: pre;">        count: &#39;&#39;,   
<span style="white-space: pre;">        timer: null,   
<span style="white-space: pre;">      }  
<span style="white-space: pre;">    },  
<span style="white-space: pre;">    methods:{   
<span style="white-space: pre;">      getCode(){    
<span style="white-space: pre;">        const TIME_COUNT = 60;    
<span style="white-space: pre;">        if (!this.timer) {     
<span style="white-space: pre;">          this.count = TIME_COUNT;     
<span style="white-space: pre;">          this.show = false;     
<span style="white-space: pre;">          this.timer = setInterval(() => {     
<span style="white-space: pre;">            if (this.count > 0 && this.count <= TIME_COUNT) {      
<span style="white-space: pre;">              this.count--;      
<span style="white-space: pre;">            } else {      
<span style="white-space: pre;">              this.show = true;      
<span style="white-space: pre;">              clearInterval(this.timer);      
<span style="white-space: pre;">              this.timer = null;      
<span style="white-space: pre;">            }     
<span style="white-space: pre;">          }, 1000)     
<span style="white-space: pre;">        }   
<span style="white-space: pre;">      }   
<span style="white-space: pre;">    } 
</script>

Uncaught SyntaxError: Unexpected token {

所以按照官方文档的格式，把js的结构改成

<script> 
    new Vue({ 
      el:&#39;.register-pannel&#39;,      
      data:{    
        show:true,   
        timer:null, 
        count:&#39;&#39; 
      },  
      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 ブラウザがエラー Uncaught SyntaxError: Unexpected token { を報告し続けることがわかりました

したがって、次の形式に従っています公式ドキュメント、jsの構造変更OK

<script>
 new Vue({
  el:&#39;.register-pannel&#39;, //注册p的class 
  data:{   
  show:true,  
  timer:null,
  count:&#39;&#39;
  }, 
  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 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜vue.jsにnpmをインストールする手順の詳細な説明🎜🎜🎜🎜🎜axiosが表示されたときに302ステータスコードに対処する方法🎜🎜🎜

以上がvueは検証コードカウントダウン機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。