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

推薦する

CSS3 で less のテキストの長い影を実装する

この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...

初心者向けのMySQLデータベースとテーブルDDLの作成と操作の学習

目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...

HTML ユーザー登録ページ設定ソースコード

上記の Web ページをデザインします。 <!DOCTYPE html> <htm...

docker を使用して Redis マスター/スレーブを構築する方法

1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...

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

MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...

MySQL count(1)、count(*)、count(field)の違い

目次1. COUNTの初見2. COUNT(フィールド)、COUNT(定数)、COUNT(*)の違い...

MySQLのネストされたトランザクションで発生する問題

MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....

Angularコンポーネントの仲介モードの詳細な説明

目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...

Linux+ApacheサーバURLの大文字と小文字の区別の問題を解決する

今日、問題が発生しました。ブラウザのアドレスバーにURLアドレスを入力する際、ページを正常にアクセス...

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

Linux でユーザーにルート権限を追加する方法の概要

1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...

MySQLの整数データ型tinyintの詳細な説明

目次1.1Tinyint型の説明1.2 練習環境の説明1.3 未署名属性の追加1.3.1 SQLモー...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

MySQL 整合性制約の定義と例のチュートリアル

目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...