Vue.js学習のフィルタ詳細

前言
この教程では、いくつかの例を通して、VueJsのフィルタを理解し、学習します。この文章を読む前提はVueに対して基本的な文法の基礎ができていることです。
Vue.Jsのフィルタの基礎
フィルタは、データを入力することにより、データを処理し、データ結果を返すことができる簡単な関数です。Vueには多くの便利なフィルターがあります。公式文書を参照してください。http://cn.vuejs.org/api/#フィルタ、フィルタは通常、コンジットマーク「|」を使用します。

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

upercaseフィルタ：入力した文字列を大文字のフィルタに変換します。
VueJsはチェーン式でフィルターを呼び出すことができます。簡単に言えば、フィルタの出力は次のフィルタの入力となり、再度フィルタリングします。次に、私たちはVueのfilterBy＋orderByフィルタを使って、すべての商品をフィルタリングする簡単な例を想像できます。濾過された製品は果物類の商品です。
filterByフィルタ：フィルタの値は行列、filterBy＋フィルタ条件でなければなりません。フィルタリングの条件は'string function'+in'optionKeyName'です。
orderByフィルタ：フィルタの値は行列、orderBy＋フィルタ条件でなければなりません。フィルタリング条件は、'string𞓜array𞓜function'+order≧0は昇順124; 124; order<0は降順'である。
次に、次の例を見てもいいです。私たちはこの配列を遍歴して、彼らをリストに印刷したいです。これは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フィルタは価格によって昇順をしました。降順を望むなら、0以下のパラメータを追加する必要があります。
カスタムフィルタ
VueJsは強力なフィルタをたくさん提供してくれましたが、まだ足りない場合があります。幸いなことに、Vueは私達に綺麗で簡潔な方式で自分達のフィルタを定義してくれました。その後、パイプを利用してフィルタリングを完成できます。
グローバルのカスタムフィルタを定義するには、Vue.filter()ビルダーを使用する必要があります。このコンストラクタは二つのパラメータが必要です。

Vue.filter() Constructor Parameters:

      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: '  ',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のインスタンスに影響を与えません。

/*      
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: '  ',price: 2500,category: "  "},
  {name: '  ',price: 10025,category: "  "}, 
  {name: '  ',price: 15,category: "  "}, 
  {name: '  ',price: 25,category: "  "}
 ]
 },
 //      
 filters: {
 discount: function(value, discount) {
  return value * (discount / 100);
 }
 }
})

グローバルを定義すると、すべてのインスタンスでフィルタが呼び出されます。定義がインスタンスであれば、インスタンスでフィルタが呼び出されます。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習やvueを使うことに対して一定の助けをもたらしてくれると思います。もし疑問があれば、メッセージを残して交流してもいいです。