Vueは小さなカウントダウン機能を実装します

多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡単なカウントダウンボタン機能を実装する例を見てみましょう。シンプルなレイアウト、シンプルな操作、シンプルな効果、そして最も重要なのは、アイデアとカウントダウンの手順を理解することです。！！

たとえば、コードは次のようになります。

要件: 送信ボタンをクリックして、5 秒間カウントダウンします。カウントダウン中は、入力ボックスと送信ボタンは無効になります。カウントダウンが終了すると、入力ボックスと送信ボタンは通常の状態に戻ります。

1. まず必要なHTMLレイアウトを実装し、クリックイベントを追加します

<div>
    <!-- disabled は無効にするには true です -->
    入力ボックス: <input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">送信</button>
    <!-- カウントダウンテキストプロンプト-->
    <p>{{this.txt}}</p>
</div>

2.送信ボタンをクリックすると、カウントダウンが無効状態に変わります。タイマーを定義します。

<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      TXT：''、
      真:偽、
      入力:''
    }
  },
  方法:{
    ハンドルを追加します（）{
      //n=5秒を定義する n=5とする
      //タイマー時間を定義する
      time = setInterval(()=>{ とする
        //無効にする this.istrue=true
        //カウントダウンテキストプロンプトを変更する this.txt=n+'秒以内に送信'
        んー
        //n<0 の場合、タイマーをクリアし、無効状態を解除し、テキストプロンプトは空になります (表示されません)
        n<0の場合{
          txt=""
          this.istrue=false
          クリア間隔(時間)
        }
      },1000)
    }
  }
}
</スクリプト>

アイデアと手順は上記のコメントに書かれており、簡単なカウントダウンが簡単に実現できます。

全体のコード:

<テンプレート>
  <div>
    <!-- disabled は無効にするには true にします -->
    入力ボックス: <input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">送信</button>
    <!-- カウントダウンテキストプロンプト-->
    <p>{{this.txt}}</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      TXT：''、
      真:偽、
      入力:''
    }
  },
  方法:{
    ハンドルを追加します（）{
      //n=5秒を定義する n=5とする
      //タイマー時間を定義する
      time = setInterval(()=>{ とする
        //無効にする this.istrue=true
        //カウントダウンテキストプロンプトを変更する this.txt=n+'秒以内に送信'
        んー
        //n<0 の場合、タイマーをクリアし、無効状態を解除し、テキストプロンプトは空になります (表示されません)
        n<0の場合{
          txt=""
          this.istrue=false
          クリア間隔(時間)
        }
      },1000)
    }
  }
}
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: