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 における or、in、union、インデックス最適化の詳細な分析

この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...

Linux 負荷分散 LVS の詳細な理解

目次1. LVS 負荷分散2. 負荷分散LVSの基本紹介3. LVSアーキテクチャ3.1 ロードバラ...

Zabbixで監視する必要があるホストを追加するための詳細な手順

監視ホストの追加ホスト 192.168.179.104 が zabbix 監視項目に追加されます (...

docker エントリポイントファイルの詳細な説明

Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

MySql クライアントが数秒で終了する問題を解決する (my.ini が見つからない)

問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...

CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル

基本環境パゴダ設置サービスパゴダにインストールされた[Pythonプロジェクトマネージャー]パゴダに...

MySQLスレーブライブラリの復元の実践記録

状況の説明:今日、MySQL データベースのスレーブ ノード ホストにログインしたところ、/var/...

Dockerコンテナのデータを復元する方法

プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows10)

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

MySQL 構成 SSL マスタースレーブ レプリケーション

MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...