Vueタイマーの詳細な使い方

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

機能紹介:

1. 初期値は0です。[追加]ボタンをクリックすると、数字が1ずつ増加します。[追加]を続けてクリックしても、数字は+1されません。

2. [停止]ボタンをクリックして停止します。+1

ソースコード:

<!DOCTYPE html>
<html を追加="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <!-- 1. Vue パッケージをインポートする-->
  <script src="./lib/vue-2.4.0.js"></script>
</head>
 
<本文>
  <!-- 2. 制御する領域を作成する -->
  <div id="アプリ">
    <input type="button" value="追加" @click="追加">
    <input type="button" value="停止" @click="停止">
    <h4>{{ カウント }}</h4>
  </div>
 
  <スクリプト>
    var vm = 新しい Vue({
      el: '#app',
      データ： {
        カウント: 0,
        間隔ID: null
      },
      メソッド: {
        追加（） {
          // タイマーが進行中です。関数を終了します。if (this.intervalId != null) { 
            戻る 
          };
          // タイマーは空です。操作 this.intervalId = setInterval(() => {
            このカウント += 1
          }, 400)
        },
        // タイマーを停止する stop() { 
          clearInterval(this.intervalId) // タイマーをクリア this.intervalId = null; // null に設定 
        }
      }
    })
  </スクリプト>
</本文>
 
</html>

以前、エディターは開始タイミング用のコンポーネントを収集しました。このコンポーネントはプロジェクトに直接導入して使用できます。共有していただきありがとうございます。

 <テンプレート>
    <div class="タイマー">
    <div ref="スタートタイマー"></div>
    </div>
    </テンプレート>
    <スクリプト>
    エクスポートデフォルト{
    名前: 'タイマー'、
    データ （） {
    戻る {
    タイマー: "",
    コンテンツ： ""、
    時間: 0,
    分: 0,
    秒: 0
    }
    },
    作成された（）{
    this.timer = setInterval(this.startTimer, 1000);
    },
    破壊された（）{
    タイマー間隔をクリアします。
    },
    
    メソッド: {
    スタートタイマー() {
    this.seconds += 1;
    if (this.seconds >= 60) {
    this.seconds = 0;
    this.minute = this.minute + 1;
    }
    
    (this.minute >= 60)の場合{
    this.minute = 0;
    this.hour = this.hour + 1;
    }
    this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
    }
    }
    }
    </スクリプト>
    <スタイル>
</スタイル>

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

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