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

推薦する

フロートとBFCをクリアするCSSメソッド

イギリスBFC: ブロック書式設定コンテキストBFCレイアウトルール内箱は縦方向に次々に配置されます...

Ubuntu 19.10 で ssh サービスを有効にする (詳細なプロセス)

Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...

Tomcatの起動が遅い問題を素早く解決、超簡単

今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル

MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...

生年月日を年齢に変換し、グループ化して人数を数えるMySQLの例

データベースのクエリ `学生`から*を選択 クエリ結果id名前誕生日1張三1970-10-01 2李...

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

Tomcat9 Windows サービスのインストールに関する詳細なチュートリアル

1. 準備1.1 service.bat を含む tomcat 圧縮パッケージをダウンロードします。...

Docker での WSL の構成と変更の問題について

https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...