この記事の例では、右上隅の時間表示のリアルタイム更新を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: SSL を実装するために nginx を設定する方法の例
>>: MySQL 8.0.23 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)
集計関数データセットに作用し、そのデータセットの値を返します。 count: 統計結果のレコード数。...
MySQLの完全バックアップを実行するときは、--all-databaseパラメータを使用します。例...
目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...
MySQLインストーラをダウンロードする公式ダウンロードアドレス: http://dev.mysq...
質問:最近、プロジェクトの統計を行っていたときに、テーブルを上下にスクロールしたときにテーブルの先頭...
目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...
関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...
過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...
3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...
最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...
この記事では、MySQL 8.0.15をダウンロードしてインストールするための具体的な手順を参考まで...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...
目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...
HTML メタビューポート属性の説明ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウ...