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 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

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

推薦する

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

Jenkins を通じて None のイメージを定期的にクリーンアップする方法

序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...

Windows 10 に Apache 2.4.41 をインストールするチュートリアル

1. Apache 2.4.41 のインストールと設定最初のステップは、以下に示すように、https...

アバター変更機能を実装するJavaScript

この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

docker-compose を使用して MySQL を実行する方法

ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...

Linuxでmysqlの定期的なコールドバックアップを実装するためにmysqldump+expect+crontabを使用するアイデアの詳細な説明

目次1. 遭遇した問題2. アイデア3. コード1. 遭遇した問題私たちは皆、mysqldump を...

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...

MySQL で最大接続数を設定するためのヒントのまとめ

方法1: コマンドラインの変更次の図に示すように、MySQL コンソールを開いて「set GLOBA...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

Nginx リバース プロキシから go-fastdfs へのケースの説明

背景go-fastdfs は、http プロトコルをサポートする分散ファイルシステムです。一般的なプ...

MySQL 文字列連結関数 GROUP_CONCAT の詳細な説明

前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...

Helloダイアログボックスのデザイン体験の共有

「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示された...