Vue.js -- フィルタの使用のまとめ

フィルタは、入力データを処理し、データ結果を返す簡単な関数です。Vueには便利なフィルタが多く、フィルタは通常、パイプシグン「|」を使用して呼び出されます。例えば：

{{ msg | capitalize }}
// 'abc' => 'ABC'

uppercaseフィルタ：入力の文字列を大文字に変換するフィルタ。

VueJsはフィルタの連鎖呼び出しを許可しており、簡単に言えば、一つのフィルタの出力が次のフィルタの入力になる、そして再びフィルタリングされることを意味します。次に、VueのfilterByを使用した非常にシンプルな例を想像してみましょう。 + orderByフィルタを使用してすべての商品productsをフィルタリングします。フィルタリングされた製品は果物カテゴリの製品です。

filterByフィルタ：フィルタの値は配列でなければなりません、filterBy + フィルタリング条件。フィルタリング条件は：'string || function'+ in 'optionKeyName'

orderByフィルタ：フィルタの値は配列でなければなりません、orderBy + フィルタリング条件。フィルタリング条件は：'string || array ||function' + 'order ≥ 0 が昇順 || order < 0 が降順'

次に、以下の例を見てみましょう：商品配列productsを持っており、その配列をループして一覧表示する方法をv-forは簡単に実現できます。

<ul class="product">
  <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 1">}}
    {{product.name}}-{{product.price | currency}}
  </li>
</ul>

上記の例では、'category'に'水果'というキーワードを持つリストに対してfilterByフィルタリングを使用して、'水果'キーワードを持つリストのみを返します。orderByフィルタリングは価格に基づいて昇順にフィルタリングします。降順にフィルタリングするには、マイナスのパラメータを追加します；

カスタムフィルタリング関数

Vue.jsは多くの強力なフィルタリング関数を提供していますが、時にはそれが十分ではありません。幸いなことに、Vueは独自のフィルタリング関数を定義するためのクリーンでシンプルな方法を提供しており、パイプライン「|」を使用してフィルタリングを完了できます。

グローバルなカスタムフィルタリング関数を定義するには、Vue.filter()コンストラクタを使用する必要があります。このコンストラクタには2つのパラメータが必要です。

Vue.filter() コンストラクタのパラメータ:

1.filterId: フィルタリングIDは、フィルタリング関数のユニークな識別子として使用されます；

2.filter function: フィルタリング関数は、functionを使用して引数を受け取り、受け取った引数を必要なデータ形式に整形します。

上記の例では、商品価格に割引を適用するために実装しています5割引を実装する方法は、商品の価格に割引を適用するカスタムフィルタリング関数を実装することです5割引；それを実装するには、以下のことを行います：

a、Vue.filter()コンストラクタを使用して、discountという名前のフィルタリング関数を作成します

b、商品の元価格を入力すると、5割引の後の割引価格が返されます

コードは以下の通りです：

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'リンゴ',price: 25,category: "果物"}, 
      {name: 'バナナ',price: 15,category: "果物"}, 
      {name: 'リンゴ',price: 65,category: "果物"}, 
      {name: 'BMW',price: 2500,category: "自動車"},
      {name: 'ベンツ',price: 10025,category: "自動車"}, 
      {name: 'オレンジ',price: 15,category: "果物"}, 
      {name: 'アウディ',price: 25,category: "自動車"}
    ]
  },
)

今では、Vueが提供するフィルタリング関数のように、カスタムフィルタリング関数を使用できます

<ul class="product">
  <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount | currency}}
  </li>
</ul>

上記のコードは商品に割引を適用するために実装されています5割引、それでは、任意の割引を適用するには、discountフィルタリング関数に割引値パラメータを追加して、フィルタリング関数を改造します。

 Vue.filter('discount', function(value, discount) {
  return value * (discount / 100);
});

それから、私たちのフィルタリング関数を再び呼び出します

 <ul class="product">
  <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount 25 | currency}}
  </li>
</ul>

私たちはVueインスタンス内でフィルタを構築することもできます。この方法の利点は、他のインスタンスに影響を与えないことです。

/*グローバルに定義 
Vue.filter('discount', function(value,discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'リンゴ',price: 25,category: "果物"}, 
      {name: 'バナナ',price: 15,category: "果物"}, 
      {name: 'リンゴ',price: 65,category: "果物"}, 
      {name: 'BMW',price: 2500,category: "自動車"},
      {name: 'ベンツ',price: 10025,category: "自動車"}, 
      {name: 'オレンジ',price: 15,category: "果物"}, 
      {name: 'アウディ',price: 25,category: "自動車"}
    ]
  },
  //インスタンス内でカスタム
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
)

グローバルに定義されたフィルタは、すべてのインスタンスで呼び出せるようになります。インスタンス内で定義されたフィルタは、そのインスタンス内で呼び出されます。　

これで本文のすべての内容が終わります。皆様の学習に役立つことを願っています。また、ナイアラーチュートリアルを多くのサポートをお願いします。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードした内容であり、当サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください）で通報し、関連証拠を提供してください。一旦確認がとりたいとされると、当サイトは即座に侵害疑いのコンテンツを削除します。

基礎教程