ملخص استخدام مرشحات Vue.js

المرشح هو وظيفة بسيطة تتمكن من معالجة البيانات المدخلة بسرعة وتقديم نتيجة بيانات. يحتوي Vue على العديد من المرشحات المريحة، عادة ما يستخدم علامة أنبوب " | "، مثل:

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

مرشح uppercase: مرشح يحوّل النص المدخل إلى أحرف كبيرة.

يسمح VueJs لك بتشغيل المرشحات بشكل متسلسل، ببساطة، يعني أن خروج مرشح يصبح مدخلاً لمرشح آخر، ثم يتم مرشح مرة أخرى. فيما يلي، يمكننا التفكير في مثال بسيط يستخدم مرشحات Vue filterBy + orderBy لمرشح جميع المنتجات products. المرشح المنتجات هي المنتجات من فئة الفواكه.

مرشح filterBy: يجب أن تكون قيمة المرشح مجموعة، filterBy + شرط المرشح. شرط المرشح هو: 'string || function'+ في '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> 

في هذا المثال، يتم استخدام مرشح filterBy لمرشح القائمة التي تحتوي على كلمة "فواكه" في 'category'، والقائمة التي تعود هي القائمة التي تحتوي فقط على كلمة 'فواكه'، ومرشح orderBy يقوم بترتيب الأسعار تصاعدياً، وإذا أردت ترتيبها تنازلياً، فكل ما تحتاجه هو إضافة معامل أقل من صفر؛

مرشحات مخصصة

على الرغم من أن VueJs يقدم لنا العديد من المرشحات القوية، إلا في بعض الأحيان لا يكفي. لحسن الحظ، يقدم لنا Vue طريقة نظيفة وسهلة لتعريف مرشحاتنا الخاصة، وبعد ذلك يمكننا استخدام أنبوب " | " لإكمال المرشحة.

To define a global custom filter, you need to use the Vue.filter() constructor. This constructor requires two parameters.

Vue.filter() Constructor Parameters:

1.filterId: Filter ID, used as the unique identifier for your filter;

2.filter function: Filter function, use a function to receive a parameter, and then format the received parameter into the desired data result.

In the above example, how do we implement a 50% discount on product prices? It is actually an implementation of a custom filter that represents a 50% discount on the product price; to implement it, you need to complete the following:

a、Use the Vue.filter() constructor to create a filter named discount

b、Enter the original price of the product and return the discounted price after a 50% discount

Code is as follows:

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: "汽车"}
    ]
  },
} 

Now you can use the custom filter just like Vue's built-in filters

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

The above code implements a 50% discount on products, and if you want to implement a price discount of any amount, you should add a discount value parameter to the discount filter and modify our filter.

 Vue.filter('discount', function(value, discount) {
  القيمة = القيمة * (الخصم / 100);
}); 

Then call our filter again

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

We can also construct our filters within our Vue instance, and the benefit of this approach is that it will not affect other Vue instances that do not need this filter.

/*defined globally 
Vue.filter('discount', function(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) {
      القيمة = القيمة * (الخصم / 100);
    }
  }
} 

يمكن استدعاء المرشحات المحددة في النطاق العالمي في جميع المثاليات، إذا تم تعريفها في المثال، يتم استدعاء المرشحات في المثال.　

هذا هو محتوى المقال كله، نأمل أن يكون قد ساعدكم في تعلمكم، ونأمل أن تدعموا تعليمات النفخ.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع المالك الأصلي بحقوق الطبع والنشر، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت الذين يقدمون المساهمات بشكل تلقائي ويتم تحميلها، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على ذلك، وسيتم حذف المحتوى المزعوم عن انتهاك حقوق النسخ فور التحقق منه.