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

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

推薦する

shtml includeの使い方

これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...

Windows の MySQL net start mysql MySQL サービスの起動エラーが発生する システムエラーの解決

目次1- エラーの詳細2-シングルソリューション2.1-ディレクトリ C:\Windows\Syst...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

Docker と Intellij IDEA の融合により、Java 開発の生産性が 10 倍向上

目次1. 開発前の準備2. 新しいプロジェクトIdea は Java 開発のための強力なツールであり...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

DeepinでPyenvをインストールする手順

序文これまでは、/bin/ ディレクトリのソフトリンクを変更して Python のバージョンを切り替...

CentOS/RHEL システムで VLAN タグ付きイーサネット カードを使用する方法

シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...

アコーディオン効果を実現するJavaScript

この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Ubuntu 18.04 で中国語入力方法を設定する方法

Ubuntuの最新バージョンでは、ユーザーは中国語入力方法を別途ダウンロードする必要がなくなりました...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...