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

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

推薦する

つまり、フィルターコレクション

IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートして...

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...

MySQLインストール後のデフォルトデータベースの役割の詳細な説明

MySQL を学習すると、インストール後にいくつかのデフォルトのデータベースが付属していることに気付...

Centos7.5でのIPアドレス設定の実装

1. IPアドレスを設定する前に、まずifconfigを使用してネットワークカード情報を表示し、ネッ...

Vueフォームバインディングとコンポーネントの詳細な説明

目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...

MySQLインスタンスを安全にシャットダウンする方法

この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...

MySQL 5.7 の sql_mode のデフォルト値によって生じる落とし穴と解決策

通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...

JavaScriptのアロー関数の特徴と通常の関数との違い

目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...

GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...

Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

簡単です。チュートリアルを見てください。ブロガー1. まずdockerを起動するサービスdocker...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...

nginx ウェブサイト サービスのアンチホットリンクを設定する方法 (推奨)

1. ホットリンクの原則1.1 Webページの準備Web ソース ホスト (192.168.153...

誰もが登録できるようにJiedaibaoを宣伝するにはどうすればよいでしょうか? ジエダイバオのプロモーション方法とスキル

借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...

画像をクリックして切り替えるJavaScript

クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...