vue3 タイムスタンプ変換 (フィルターを使用せずに)

vue3 タイムスタンプ変換 (フィルターを使用せずに)

vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、フィルターが削除され、使用できなくなります。公式の推奨事項は、メソッドまたは計算プロパティを使用することです。

タイムスタンプを変換できる Time.ts ファイルを以下に記述します。

クラス Time {
    // 時刻をフォーマットする public formatTime(time: number) {
        date = new Date(time * 1000); とします。
        年 = date.getFullYear();
        月 = date.getMonth() + 1 とします。
        day = date.getDate() とします。
        時間 = date.getHours();
        分を date.getMinutes() とします。
        秒を date.getSeconds() とします。
        年 + "-" + month.toString().padStart(2, "0") + "-" + day.toString().padStart(2, "0") を返します。
            + " " + hour.toString().padStart(2, "0") + ":" + minute.toString().padStart(2, "0")
            + ":" + second.toString().padStart(2, "0");
    }
}
 
定数time = 新しいTime();
デフォルトの時間をエクスポートします。


これを使用するには、テンプレートでこのメソッドを呼び出して、対応するタイムスタンプを渡すだけです。

{{time.formatTime(タイムスタンプ)}}


表示効果:

2021-05-17 10:59:59

現時点では、上記の形式にのみ変換できます。さらに形式が必要な場合は、 formatTimeに 2 番目のパラメータを追加して、フォーマットされた時刻形式を示し、それに応じて変換することができます。

これで、vue3 タイムスタンプ変換 (フィルターなし) に関するこの記事は終了です。vue3 タイムスタンプ変換に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueでフィルターを使用するときにこれが未定義になる問題
  • vueフィルターがこのオブジェクトを取得できない問題を解決する
  • Vue のデータとイベントのバインディングとフィルターの詳細な説明
  • Vueはプライベートフィルターと基本的な使用法を定義します
  • vueローカルフィルターがこれを取得できない問題を解決する

<<:  Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

>>:  フォント名に従ってフォントを呼び出すと、ブラウザに必要なフォントが表示されます。

推薦する

MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...

MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。

table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...

正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

Dockerコンテナシェルスクリプトの実行ステータスを監視する方法

シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...

イメージの起動時にdocker runまたはdocker restartが自動的に終了する問題を解決します

コマンドを実行します: docker run --name centos8 -d centos /b...

MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...

Vue での this.$set の使用に関する詳細な説明

目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...

CSS スタイルをプログラムで処理するためのサンプル コード

プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...

モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)

モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...

MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法

実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...

航空機戦争ゲームを実装するためのネイティブJS

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

BT Baota Panel php7.3 および php7.4 が ZipArchive をサポートしない問題の解決方法

Baota PanelのPHP7.3バージョンがZipArchiveをサポートしていないため、プログ...

Pagoda Panel のインストール時にサーバーがデータベースにリモート接続できない問題の解決策

自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...

CentOS の Nginx 公式 Yum ソースの設定を詳しく解説

私はプロジェクトの展開にAlibaba Cloudから購入したCentOSを使用しています。最近、プ...

Dockerfile を使用したカスタムイメージの構築の実装

目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...