vuejsでページに日付を実装する方法

ページに日付を実装するための Vuejs メソッド: 1. 時間を保存するデータ内の変数を定義します; 2. "<div>{{nowTime}}</div>" を設定します; 3. 渡します「 timeFormate(timeStamp) {...}」メソッドで現在の日付を表示できます。

この記事の動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

vuejs はページに日付をどのように実装しますか?

vue プロジェクトでリアルタイム時刻 (年、月、日、時、分、秒) を表示します

1. データ内の変数を定義します。時刻を保存するための

data(){
   return {
     nowTime:''
   }
  },

2。div

<div>{{nowTime}}</div>

3.js パーツ

 //显示当前时间（年月日时分秒）
    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();
      this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+&#39;:&#39;+ss ;
    },
    nowTimes(){
      this.timeFormate(new Date());
      setInterval(this.nowTimes,1000);
      this.clear()
    },
    clear(){
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    }

4 を指定します。それをコピーして貼り付けるだけで、主にタイマーを使用し、毎回呼び出します。 2 番目、最後にタイマーをクリアし、関数

推奨: 「最新の 5 つの vue.js ビデオ チュートリアル セレクション 」

以上がvuejsでページに日付を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。