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 のインストールと設定のチュートリアル

推薦する

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

nginxワーカープロセスループの実装

ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

vite+vue3+element-plus プロジェクトをビルドする手順

viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...

XMLとCSSスタイルの組み合わせ

学生.xml <?xml バージョン="1.0" エンコーディング=&qu...

Linux lessコマンド例の詳細な説明

ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...

Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)

複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...

MySQL のジオメトリ型を使用して経度と緯度の距離の問題を処理する方法

テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...

Nginx+Keepalived でデュアルマシン マスターとバックアップを実装する方法

序文まず、高性能サーバーの高可用性またはホットスタンバイソリューションである Keepalived ...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

MySQL 8.0 が起動できない 3534 の解決策

MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...