مرشحات Vue.js

الفلاتر هي الطريقة التي تتيح لنا Vue.js تطبيق التنسيق والتحويلات على قيمة مستخدمة في الاستيفاء للقالب.

المرشحات هي وظيفة توفرها مكونات Vue والتي تتيح لك تطبيق التنسيق والتحويلات على أي جزء من البيانات الديناميكية للقالب.

لا يغيرون بيانات المكون أو أي شيء ، لكنهم يؤثرون فقط على المخرجات.

لنفترض أنك تطبع اسمًا:

<template>
  <p>Hi {{ name }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>

ماذا لو كنت تريد التحقق من ذلكnameتحتوي بالفعل على قيمة ، وإذا لم تتم طباعة "هناك" ، فسيقوم القالب الخاص بنا بطباعة "مرحبًا!"؟

أدخل المرشحات:

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
filters: {
fallback: function(name) {
return name ? name : ‘there’
}
}
}
</script>

لاحظ بناء الجملة لتطبيق مرشح ، وهو| filterName. إذا كنت معتادًا على Unix ، فهذا هو مشغل أنابيب Unix ، والذي يستخدم لتمرير مخرجات عملية ما كمدخل إلى العملية التالية.

الfiltersخاصية المكون هي كائن. عامل التصفية الفردي هو دالة تقبل قيمة وتقوم بإرجاع قيمة أخرى.

القيمة التي تم إرجاعها هي القيمة التي تمت طباعتها بالفعل في قالب Vue.js.

المرشح ، بالطبع ، لديه حق الوصول إلى البيانات والأساليب المكونة.

ما هي حالة الاستخدام الجيدة للفلاتر؟

تحويل سلسلة ، على سبيل المثال ، تكبيرها أو جعلها صغيرة
تنسيق السعر

أعلاه رأيت مثالًا بسيطًا لمرشح:{{ name | fallback }}.

يمكن ربط الفلاتر بسلاسل بتكرار تركيب الأنبوب:

{{ name | fallback | capitalize }}

هذا أولاً ينطبق علىfallbackمرشح ، ثمcapitalizeمرشح (لم نحدده ، لكن حاول إنشاء واحد!).

يمكن أن تقبل المرشحات المتقدمة أيضًا المعلمات ، باستخدام صيغة معلمات الوظيفة العادية:

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: ‘House’
}
},
filters: {
prepend: (name, prefix) => {
return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}
}
}
</script>

إذا قمت بتمرير المعلمات إلى مرشح ، فإن أول عنصر يتم تمريره إلى وظيفة التصفية يكون دائمًا العنصر الموجود في نموذج الاستيفاءnameفي هذه الحالة) ، متبوعة بالمعلمات الصريحة التي مررت بها.

يمكنك استخدام معلمات متعددة عن طريق فصلها باستخدام فاصلة.

لاحظ أنني استخدمت وظيفة السهم. نتجنب وظيفة السهم في الأساليب والخصائص المحسوبة عمومًا لأنها تشير دائمًا إلى ذلكthisللوصول إلى بيانات المكون ، ولكن في هذه الحالة ، لا يحتاج المرشح إلى الوصول إلى هذا ولكنه يتلقى جميع البيانات التي يحتاجها من خلال المعلمات ، ويمكننا استخدام صيغة دالة السهم الأبسط بأمان.

هذه الحزمةيحتوي على الكثير من المرشحات المعدة مسبقًا لتستخدمها مباشرةً في القوالب ، والتي تشملcapitalizeوuppercaseوlowercaseوplaceholderوtruncateوcurrencyوpluralizeو اكثر.

تحميل مجانيكتيب Vue

مرشحات Vue.js

الفلاتر هي الطريقة التي تتيح لنا Vue.js تطبيق التنسيق والتحويلات على قيمة مستخدمة في الاستيفاء للقالب.

المزيد من دروس vue: