この記事の例では、右上隅の時間表示のリアルタイム更新を実現するための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 の場合)
display: flex レイアウトに関しては、深く理解している人もいますし、私も他の人の作業か...
エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...
テーブルの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できます。基本的...
CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...
目次1. スクリプトvim環境2. シェルスクリプトで環境を定義する方法3. シェルスクリプト内の翻...
1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...
目次コード:補充:要約する要件: 左のツリーと右のテーブル。組織ツリーでノードを選択した後、詳細ペー...
注: データベースのバージョンの問題により、プロジェクトの起動時にエラーは発生しませんでしたが、デー...
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
脆弱性の詳細VSFTP は、GPL に基づいてリリースされた Unix ライクなシステムで使用される...
#事例: 従業員の給与水準を照会する 選択 給与、等級 から 従業員 参加する ジョブグレード g ...
目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...
この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...
この記事では、CSS3 を使用した Web サイトの商品表示の効果を紹介し、皆さんと共有します。詳細...
現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...