الفلاتر هي الطريقة التي تتيح لنا 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:
- نظرة عامة على Vue.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020