Vueはフィルターを使用して日付をフォーマットします

Vueはフィルターを使用して日付をフォーマットします

この記事では、フィルターを使用して日付をフォーマットするVueの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

ケース要件

ケーススタディ

1. フィルタリングされていないフォーマットされた日付形式を表示する
2. 日付値と日付形式を受け取るテンプレート関数の形式を設定する
3. 日付形式に従って日付を連結し、値を返す
4. ページにスプライスされた日付を表示する

最終的なケース効果

コード

日付の表示形式を設定する

<div id="アプリ">
    <div>{{日付 }}</div>
    <div>{{日付 | 形式('yyyy-MM-dd')}}</div>
    <div>{{日付 | 形式('yyyy-MM-dd hh:mm:ss')}}</div>
    <div>{{日付 | 形式('yyyy-MM-dd hh:mm:ss:S')}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    // Vue.filter('format', 関数(値, 引数) {
    // // console.log(arg);
    // if (arg == 'yyyy-MM-dd') {
    // var ret = '';
    // ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    // ret を返します。
    // }
    // })
    Vue.filter('format', 関数(値, 引数) {
      関数 dateFormat(日付, 形式) {
        if (typeof date === "文字列") {
          var mts = date.match(/(\/Date\((\d +)\)\/)/);
          (mts && mts.length >= 3)の場合{
            日付 = parseInt(mts[2]);
          }
        }
        date = 新しい Date(date);
        if (!date || date.toUTCString() == "無効な日付") {
          戻る "";
        }
        varマップ = {
          "M": date.getMonth() + 1, //月 "d": date.getDate(), //日 "h": date.getHours(), //時間 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //四半期 "S": date.getMilliseconds() //ミリ秒 };
        フォーマット = format.replace(/([yMdhmsqS])+/g, 関数(all, t) {
          var v = map[t];
          (v != 未定義)の場合{
            (すべて長さ>1)の場合{
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            v を返します。
          } そうでなければ (t === 'y') {
            戻り値: (date.getFullYear() + '').substr(4 - all.length);
          }
          すべてを返します。
        });
        戻り形式;
      }
      dateFormat(値、引数)を返します。
    })
    var vm = 新しい Vue({
      el: "#app",
      データ: {
        日付: 新しい Date(),
      },

    });
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueフィルターの使い方
  • Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介
  • Vue3はフィルターをサポートしていません
  • Vueでグローバルフィルターをカプセル化する手順
  • Vue フィルター フィルターとテーブルでの使用
  • 複数のフィルターを 1 つのファイルにカプセル化する Vue コードの詳細
  • Vueはフィルターを通じてデータのフォーマットを実装します
  • Vue フィルターを使用した日付フォーマットのケース分析
  • Vueシリーズフィルターの使用シナリオの詳細な説明
  • Vue のフィルターと時間フォーマットの問題
  • フィルターvue.filtersの使い方
  • vue3がフィルターを削除する理由

<<:  Linuxのファイル操作の知識ポイントを詳しく解説

>>:  Linux (Ubuntu) での MySQL 5.7.17 のインストールと設定のチュートリアル

推薦する

MySQL セキュリティ管理の詳細

目次1. 順番に紹介する2. ユーザーを作成する3. ユーザーアカウントを削除する4. アクセス権5...

Tomcatアーキテクチャの原則をアーキテクチャ設計に分析する

目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...

auto.jsを使用して毎日の自動チェックイン機能を実現する

auto.js を使用して毎日のチェックインを自動化する感染症のせいで、毎日時間通りに家に帰らなけれ...

Linux で特殊文字のファイル名やディレクトリを削除する方法

inode番号でファイルを削除するまずls -iを使用して、削除するファイルのinode番号を見つけ...

Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明

1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...

Docker プライベート ウェアハウスを構築する (自己署名方式)

作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...

JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...

電子メールの HTML ページを作成するための原則の概要

HTML メールはこのサイト上の独立したホスト ページではないため、他の誰かによってホストされていま...

Vue-router ネストルーティングの詳細な説明

目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...

Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順

nginx をインストールApple Mac ではインストールに brew を使用します。brew ...

Dockerはコンテナに入るためにnsenterツールを使用する

Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...

JavaScript でローカル変数をグローバル変数に変換する方法

まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...

iptables の再起動後に Docker の iptables ルールの完全なプロセスが失われる

原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...