Vueのフィルターについて知っておくべきこと

序文

みなさんこんにちは。今日は Vue のフィルターに関するヒントをいくつか紹介します。

フィルターとは何か

Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを定義できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。

フィルターの使い方

グローバルフィルター

1. この場合は価格の￥と元を除外します
2. 例￥199​​9.00
3. 大文字化メソッドを定義して値を渡す
4. 値が空の場合は空の文字列を返します
5. それ以外の場合は、文字列「￥」「元」が追加され、toFixed(2)は指定された小数点以下の桁数に丸められます。

使い方

//メイン.js
Vue.filter("capitalize", 関数(値) {
  if (!value) が "" を返す;
  "￥" + value.toFixed(2) + "元"を返します。
});

二重中括弧内で使用する

<!-- home.vue -->
      <h1>Vue フィルター</h1>
      <p>{{ 価格 | 大文字 }}</p>
      {{ 20.6664376486 | 大文字にする }}

v-bindで使用する

      <h1>Vue フィルター</h1>
      <p :id="122 | 大文字にする"></p>

ローカルフィルター

ここで、グローバル フィルターとローカル フィルターの名前が同じ場合は、ローカル フィルターが使用されることに注意してください。

ローカル フィルター コンポーネントのオプションでローカル フィルターを定義できます。

エクスポートデフォルト{
  名前: 'インデックス',
  データ（） {
    戻る {
      価格: 1999
    }
  },
  フィルター:
    大文字にする: 関数 (値) {
      if (!value) が '' を返す
      '￥' + value.toFixed(2) + '元' を返す
    }
  }
}

フィルターは直列に接続できます

この例では、filterA は単一の引数を受け入れるフィルター関数として定義されています。式 message の値は、引数として関数に渡されます。次に、単一のパラメータを受け取るように定義されているフィルタ関数 filterB を呼び出し、filterA の結果を filterB に渡します。

{{ メッセージ | フィルターA | フィルターB }}

知らせ：

1. ローカルとグローバルという同じ名前のフィルターが 2 つある場合、それらは近接原則に基づいて呼び出されます。つまり、ローカル フィルターはグローバル フィルターの前に呼び出されます。

2. 式では複数のフィルターを使用できます。フィルターはパイプ文字「|」で区切る必要があります。実行順序は左から右です

要約する

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