Vueは右上隅の時間表示のリアルタイム更新を実装します

Vueは右上隅の時間表示のリアルタイム更新を実装します

この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

レンダリング

utils フォルダ内の index.js

エクスポートデフォルト{
  // 右上隅のタイムスタンプを取得します formatDate(time) {
    newTime = "" とします。
    date = new Date(time); とします。
    let a = new Array("日","MON","TUE","WED","THUR","FRI","SAT");
    年 = date.getFullYear() とします。
        month = date.getMonth()+1, //月は0から始まります day = date.getDate(),
        時間 = date.getHours(),
        分 = date.getMinutes(),
        秒 = date.getSeconds(),
        week = 新しいDate().getDay();
        時間<10の場合{
          時間 = "0"+時間;
        }
        最小値<10の場合{
          min = "0" +分;
        }
        (秒<10)の場合{
          秒 = "0"+秒;
        }
    newTime = 年 + "-"+月+"-" +日 +"週"+a[週] + " "+時間+":"+分+":"+秒;
    新しい時刻を返します。
  }
}

ページフォルダ内のsrc==>cs.vue

<テンプレート>
  <div class="main">   
    <!-- ヘッダー -->
    <div class="header">     
      <div class="cue_time">{{現在の日付}}</div>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
  '../utils/index' から utils をインポートします 
  エクスポートデフォルト{
    名前:"トランニン",
    データ () {
      戻る {       
        現在の日付: utils.formatDate(新しい日付())、
        currentDateTimer:null, //ヘッダーの現在の時刻}
      
    },
    方法:{
      // ヘッダー時間を更新する refreshCurrentTime(){
        this.currentDate = utils.formatDate(新しい日付())
      }
 
    },
    マウントされた(){
      // 時間指定の更新時間 this.currentDateTimer = setInterval(this.refreashCurrentTime,1000)
 
    }
  }
</スクリプト>

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

以下もご興味があるかもしれません:
  • Vueで現在時刻を取得しリアルタイムで更新する実装コード
  • Vue2.0 カウントダウン プラグイン (タイムスタンプの更新ジャンプは影響を受けません)

<<:  SSL を実装するために nginx を設定する方法の例

>>:  MySQL 8.0.23 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

推薦する

MySQLは集計関数を使用して単一のテーブルをクエリします

集計関数データセットに作用し、そのデータセットの値を返します。 count: 統計結果のレコード数。...

MySQL の完全バックアップ中に特定のライブラリを除外する方法

MySQLの完全バックアップを実行するときは、--all-databaseパラメータを使用します。例...

Dockerコンテナのいくつかの保存方法の詳細な説明

目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...

MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

MySQLインストーラをダウンロードする公式ダウンロードアドレス: http://dev.mysq...

テーブルの4辺を上下左右にスクロールするように固定する方法

質問:最近、プロジェクトの統計を行っていたときに、テーブルを上下にスクロールしたときにテーブルの先頭...

Linuxシステムの操作レベルの詳細な紹介

目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...

Nginx タイムアウト設定の詳細な説明

最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...

MySQL 8.0.15 のダウンロードとインストールの詳細なチュートリアルは初心者にとって必須です。

この記事では、MySQL 8.0.15をダウンロードしてインストールするための具体的な手順を参考まで...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

Nginx 構成 SSL および WSS 手順の紹介

目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...

Windows 10 に MySQL 8.0.19 を zip 形式でインストールする詳細なチュートリアル

目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...

HTML ウェブページのメタビューポート属性の説明

HTML メタビューポート属性の説明ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウ...