Vue js現在時刻をリアルタイムで表示

まず、現在の時間に戻ります.
これは現在の時間を取得する関数(秒を含まない)で、data()にグローバル変数nowTimeを宣言することを覚えておいてください.

 methods: {
  timeFormate(timeStamp) {
          let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      this.nowTime = year + " " + month + " " + date +" "+" "+hh+":"+mm ;
    },
}

次にタイマーを追加します.
ここではmethods:{}にタイマーを含む関数をもう一つ書きます.私のコードは以下の通りです.
説明すると、nowTimes()関数はまずtimeFormate()関数を呼び出し、それからタイマsetInterval()を書きます.タイマの中にはnowTimes()関数自体を呼び出し、時間間隔は30秒(現在のケースに表示されるべき時間は分、30秒に1回呼び出すのが最適です)です.秒を表示する必要がある場合はtimeFormate()関数で秒を取得します.そしてタイミング間隔を1秒に設定して1回呼び出せば良い.

 methods: {
//         
  timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      // return year + " " + month + " " + date +" "+" "+hh+":"+mm ;
      this.nowTime = year + " " + month + " " + date +" "+" "+hh+":"+mm ;
      // console.log(this.nowTime);
    },
//      
    nowTimes(){
      this.timeFormate(new Date());
      setInterval(this.nowTimes,30*1000);
    },
}

最後に、生命のフックの中で呼び出します.
私が2つの生命のフックの中で呼び出したのを見ることができますが、実は私はあなたにこの2つを勝手に1つの呼び出しを選んでくれればいいと言っています.

//      
  created() {
    this.nowTimes();
  },
  //      
  mounted(){
    this.nowTimes();
  },

これで大成功..
そうだ呼び出しを覚えてる

       
    ：{{nowTime}}
    

よし、完成!!!