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

前言
このチュートリアルでは、いくつかの例を通じて、VueJsのフィルタを理解し、学習します.この文を読む前提は、Vueに対して基本的な文法の基礎を持っていることです.
Vue.Jsのフィルタベース
フィルタは、データを入力することで、データをタイムリーに処理し、データ結果を返す簡単な関数です.Vueには便利なフィルターがたくさんあり、公式ドキュメントを参考にすることができます.http://cn.vuejs.org/api/#通常、フィルタではパイプマーク"|"が使用されます.たとえば、次のようになります.

{{ 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で簡単に実現できます.

{{product.name}}-{{product.price | currency}}
上の例では、filterByで「category」に「果物」のキーワードが含まれているリストをフィルタリングし、戻ってくるリストは「果物」のキーワードだけが含まれているリストであり、orderByフィルタは価格に基づいて昇順を行い、降順したい場合は0未満のパラメータを追加する必要があります.
カスタムフィルタ
VueJsは強力なフィルタをたくさん提供してくれましたが、足りないことがあります.幸いなことに、Vueは私たち自身のフィルタを定義するためにきれいで簡潔な方法を提供し、その後、パイプ「|」を利用してフィルタを完了することができます.Vue.filter()コンストラクタを使用する必要があるグローバルカスタムフィルタを定義します.このコンストラクタには2つのパラメータが必要です.

Vue.filter() Constructor Parameters:

      1.filterId:フィルタIDは、あなたのフィルタの唯一の識別として使用されます.
      2.filter function:フィルタ関数は、1つの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が持参したフィルタのようにカスタムフィルタを使用できるようになりました

{{product.name}}-{{product.price|discount | currency}}
上のコードで実現した商品は5割引ですが、価格を任意に割引するには?discountフィルタに割引数値パラメータを追加して、私たちのフィルタを改造するべきです.

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

フィルタを再呼び出し

{{product.name}}-{{product.price|discount 25 | currency}}
また、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の使用に一定の助けになることを望んでいます.疑問があれば、伝言を残して交流してください.