Vue フィルターの使用とタイムスタンプ変換の問題

1. 概念をすぐに認識する:

みなさんこんにちは。Vue のフィルターはよく知られているポイントです。以下では、タイムスタンプ変換の例を使用して、フィルターをすばやく使用する方法を説明します。

公式声明によると、Vue.js ではフィルターをカスタマイズでき、一般的なテキストの書式設定に使用できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。フィルターは、JavaScript 式の最後に「パイプ」記号で示されて追加する必要があります。

簡単に言うと、フィルター内に処理関数を定義し、パイプ文字「|」の後に関数名を記述すると、パイプ文字「|」の前のカスタマイズされたデータが処理され、カスタマイズされたデータが自動的にフィルター関数のパラメータになります。

<!-- 二重中括弧内 -->
{{ メッセージ | 大文字 }}

<!-- `v-bind` 内 -->
<div v-bind:id="rawId | formatId"></div>

フィルターは主にローカルフィルターとグローバルフィルターに分けられます。詳細については以下を参照してください。

2. ローカルフィルター:

1. ローカルフィルターは、コンポーネントのオプションで定義され、そのコンポーネントでのみ使用できるフィルターです。私たちの一般的な開発では、時間バックエンドは通常、フロントエンドが独自に処理するためのタイムスタンプのみを返します。たとえば、次の例では、タイムスタンプを日付形式に変換するフィルターを定義します (手順に注意してください)。

<テンプレート>
  <div>
    <!-- 4. データをレンダリングしてフィルターを設定する-->
    {{ 回 | 変換 }}
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      // 1. タイムスタンプデータをシミュレートする times: 1616959086000,
    };
  },
  // 2. フィルターを定義する: {
    //3. 処理関数を定義します。パラメータ値は処理されるデータです。変換: function (value) {
      // タイムスタンプを処理するために Date メソッドを呼び出します。 return new Date(value).toLocaleString();
    },
  },
};
</スクリプト>

その結果、変換は成功しました。

2. それだけでなく、フィルターは直列に接続することもできます。つまり、複数のフィルターを定義することができます。たとえば、次の例は、最初に変換関数を使用してtimesデータを処理して結果を取得し、次にagainChange関数を使用して前の結果を処理して最終結果を取得することと同じです。

 {{ 回 | 変換 | 再度変更 }}

基本的なデモンストレーションは次のとおりです。

<テンプレート>
  <div>
    <!-- 5. フィルターを追加-->
    {{ 回 | 変換 | 再度変更 }}
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      // 1. タイムスタンプデータをシミュレートする times: 1616959086000,
    };
  },
  // 2. フィルターを定義する: {
    //3. 処理関数を定義します。パラメータ値は処理されるデータです。変換: function (value) {
      // タイムスタンプを処理するために Date メソッドを呼び出します。 return new Date(value).toLocaleString();
    },
    //4. 別のフィルターを定義し、データの前に「Time is:」という単語を追加します。Change: function (value) {
      「時間は:」+ 値を返します。
    },
  },

};
</スクリプト>

3. 同時に、フィルターはパラメータも受け取ることができます。たとえば、最初のポイントの例を改良し、タイムスタンプを指定可能な時間形式に変換し、希望する時間形式をフィルターパラメータとして使用します。具体的な使用方法は次のとおりです（手順に注意してください）。

<テンプレート>
  <div>
    <!-- 4. フィルターを追加し、パラメーターを渡し、指定された形式で時間を返します-->
    {{ times | conversion("yyyy-MM-dd HH:mm:ss 週 w") }}
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      // 1. タイムスタンプデータをシミュレートする times: 1616959086000,
    };
  },
  // 2. フィルターを定義する: {
    //3. 処理関数を定義します。パラメータ値は処理するデータ、フォーマットは入力パラメータの変換です: function (value, format) {
      // この変換方法は紹介しません。見てください。フィルターの使用がメインです。var date = new Date(value);
      関数 addZero(日付) {
        （日付<10）の場合{
          「0」+日付を返します。
        }
        返却日;
      }
      getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: ゼロを追加します(date.getMonth() + 1)、
        M: date.getMonth() + 1、
        dd: ゼロを追加します(date.getDate())、
        d: 日付.getDate(),
        HH: addZero(date.getHours())、
        H: date.getHours(),
        hh: addZero(date.getHours() % 12)、
        h: date.getHours() % 12,
        mm: ゼロを追加します(date.getMinutes())、
        m: date.getMinutes(),
        ss: ゼロを追加します(date.getSeconds())、
        s: date.getSeconds(),
        w: (関数() {
          let a = ["日", "月", "火", "水", "木", "金", "土"];
          [date.getDay()] を返します。
        })(),
      };
      for (let i in getTime) {
        フォーマット = format.replace(i, getTime[i]);
      }
      戻り形式;
    },
  },

};
</スクリプト>

結果は次のとおりです。

3. グローバルフィルター:

グローバルと呼ばれているので、Vue インスタンスを作成する前にフィルターをグローバルに定義するのが自然です。設定後は、すべてのコンポーネントが直接使用できます。通常はカスタムファイルで定義されます。たとえば、タイムスタンプを処理する上記のフィルターは次のように使用されます。

1. src ディレクトリにフィルターフォルダーを定義し、そのフォルダーに filter.js ファイルを定義します。

2.filters.js ファイルのコードは次のとおりです。

const 変換 = 関数 (値、形式) {
      var date = 新しい Date(値);
      関数 addZero(日付) {
        （日付<10）の場合{
          「0」+日付を返します。
        }
        返却日;
      }
      getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: ゼロを追加します(date.getMonth() + 1)、
        M: date.getMonth() + 1、
        dd: ゼロを追加します(date.getDate())、
        d: 日付.getDate(),
        HH: addZero(date.getHours())、
        H: date.getHours(),
        hh: addZero(date.getHours() % 12)、
        h: date.getHours() % 12,
        mm: ゼロを追加します(date.getMinutes())、
        m: date.getMinutes(),
        ss: ゼロを追加します(date.getSeconds())、
        s: date.getSeconds(),
        w: (関数() {
          let a = ["日", "月", "火", "水", "木", "金", "土"];
          [date.getDay()] を返します。
        })(),
      };
      for (let i in getTime) {
        フォーマット = format.replace(i, getTime[i]);
      }
      戻り形式;
    }
  輸出 {
    変換 //エクスポートメソッドをここに記述}

3. main.js にグローバルフィルターを導入します。

グローバルフィルターを設定するための形式は、Vue.filter('フィルター名', 対応する処理関数); です。

'./filters/filters.js' から {conversion} をインポートします。
Vue.filter('変換', 変換);

4. コンポーネント内で直接使用できます。

<テンプレート>
  <div>
    <!-- 2. フィルターを追加し、指定された形式の時間にパラメータを渡します-->
    {{ times | conversion("yyyy-MM-dd HH:mm:ss 週 w") }}
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      // 1. タイムスタンプデータをシミュレートする times: 1616959086000,
    };
  },
};
</スクリプト>

同じ結果:

4. 拡張子:

フィルターは使用方法において計算プロパティと多少似ていることがわかりますが、それらの違いは何でしょうか?

フィルターはパラメータを渡すことができますが、これにアクセスすることはできません。キャッシュ機能はありません。同時に、フィルターを直列に接続することもできます。ローカルおよびグローバルに設定できます。フィルターは比較的単純で、明示的に呼び出された場合にのみトリガーされます。通常、テンプレートのレンダリングで使用されます。
Computed はパラメータを渡すことはできませんが、変数の操作のための this にはアクセスできます。背後にある処理ロジックは比較的複雑で、キャッシュ機能があり、コンポーネント内でより汎用的であるため、複雑なデータ変換、統計、その他のシナリオに適しています。

5. 要約:

上記はフィルターの一般的な内容です。一般的に、フィルターはローカルフィルターとグローバルフィルターに分けられます。ローカルフィルターはコンポーネント内で有効であり、グローバルフィルターはすべてのコンポーネントに対して有効です。その中で、複数のフィルターを設定し、フィルターにパラメータを渡すこともできます。一般的に、フィルターはいくつかの単純なデータレンダリングに適用されます。

Vue フィルターとタイムスタンプ変換に関する記事はこれで終わりです。Vue フィルターとタイムスタンプ変換についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: