Vue.js学習用フィルターの詳細説明

はじめに

このチュートリアルでは、いくつかの例を通して VueJs フィルターを理解して学習します。この記事を読むための前提条件は、Vue の基本的な構文の基礎をすでに持っていることです。

Vue.Jsのフィルターの基本

フィルターは、データを入力することで時間内にデータを処理し、データ結果を返すことができるシンプルな関数です。 Vue には非常に便利なフィルターが多数あります。公式ドキュメント http://cn.vuejs.org/api/#Filter を参照してください。フィルターでは通常、

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

大文字フィルタリングなどのパイプ記号が使用されます。フィルタ: 入力文字列を大文字に変換するフィルタ。

VueJs を使用すると、フィルターを連鎖的に呼び出すことができます。簡単に言うと、1 つのフィルターの出力が次のフィルターの入力になり、再度フィルター処理されます。次に、Vue の filterBy + orderBy フィルターを使用してすべての製品をフィルターする比較的単純な例を想像できます。濾過された製品は果物製品です。

filterBy フィルター: フィルターの値は、配列、filterBy + フィルター条件である必要があります。フィルター条件は次のとおりです: 'string ||' + in 'optionKeyName'

orderBy フィルター: フィルターの値は配列、orderBy + フィルター条件である必要があります。フィルター条件は次のとおりです: 'string || array ||function' + 'order ≥ 0 (昇順) || order <0 (降順)'

次に、次の例を見てみましょう。この配列を反復処理してリストに出力したいのですが、これは v-for を使用すると簡単に実現できます。

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

上記の例は、filterBy を使用して、「category」に「fruit」キーワードを含むリストをフィルターすることです。返されるリストは、「fruit」キーワードのみを含むリストであり、orderBy フィルターは価格に基づいています。昇順。降順が必要な場合は、0 未満のパラメーターを追加するだけです。

カスタム フィルター

VueJs には多くの強力なフィルターが用意されていますが、それだけでは不十分な場合があります。幸いなことに、Vue は独自のフィルターを定義するためのクリーンで簡潔な方法を提供しており、パイプ "|" を使用してフィルター処理を完了できます。

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

Vue.filter() Constructor Parameters:

1.filterId: フィルターの一意の識別子として使用されるフィルター ID。

2.filter 関数: フィルター関数を使用してパラメーターを受け取り、受け取ったパラメーターはフォーマットされます。目的のデータ結果に変換します。

上記の例で、商品価格の 50% 割引を達成したい場合はどうすればよいでしょうか?実際、これは製品価格の 50 % オフを意味するカスタム フィルターです。これを達成するには、次のことを完了する必要があります。

A. Vue.filter () コンストラクターを使用して、Discount というフィルターを作成します

b製品の元の価格を入力すると、50% 割引後に割引価格を返すことができます

以下のコードを参照してください:

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 &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount | currency}}
 </li>
</ul>

上記のコードは製品の 50% 割引を実現しますが、価格を任意に割引したい場合はどうすればよいでしょうか?割引フィルターに割引値パラメーターを追加し、フィルターを変更する必要があります。

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

その後、フィルタを再度呼び出します

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 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: '宝马',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 の学習や使用に役立つことを願っています。ご質問がある場合は、メッセージを残してください。

Vue.js学習用のフィルターのより詳しい説明については、PHP中国語Webサイトに注目してください。