Vueはシンプルなタイマーコンポーネントを実装します

window.setTimeout(callback,delay); //callback: コールバック関数 delay: 時間間隔 window.setInterval(callback,delay);

<テンプレート>
    <div class="タイマー">
    <div>{{現在時刻}}</div>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
    名前: 'タイマー'、
    データ （） {
     戻る {
      タイマー: null、
      現在時刻:"",
      時間: 0,
      分: 0,
      秒: 0
      }
    },
    作成された（）{
    this.timer = setInterval(this.startTimer, 1000);
    },
    破壊された（）{
    タイマー間隔をクリアします。
    },
    
    メソッド: {
    スタートタイマー() {
     // タイマーの蓄積によって発生する予期しないバグを回避するために、タイマーを開始する前にクリアすることをお勧めします。
     if(this.timer) {
   タイマー間隔をクリアします。
  }
     this.seconds += 1;
     if (this.seconds >= 60) {
      this.seconds = 0;
      this.minutes = this.minutes + 1;
     }
     (this.minutes>= 60)の場合{
      this.分 = 0;
      this.hour = this.hour + 1;
     }
     this.nowTime = this.toZero(this.hour): this.toZero(this.minutes): this.toZero(this.seconds)
    },
     toZero(時間番号) {
     timeNumber<10?"0"+timeNumber：timeNumber を返します
   },
 }
}
</スクリプト>