قاعدة
على غرار التوجيه المخصص ، يمكن تسجيل مرشح مخصص في الطريقة العالمية Vue.Filter () ، والتي تأخذ معلمتين: معرف المرشح ووظيفة المرشح. تأخذ وظيفة المرشح القيمة كمعلمة وإرجاع القيمة المحولة:
vue.filter ('reverse' ، function (value) {return value.split (''). revers (). Join ('')})<!-'abc' => 'cba'-> <span v-text = "message | revers
يمكن أن تتلقى وظيفة المرشح أي عدد من المعلمات:
vue.filter ('Wrap' ، function (value ، begr ، end) {return begin + value + end})<!-'hello' => 'قبل Hello After'-> <span v-text = "message | wrap" قبل "بعد" "> </span>
مرشح ثنائي الاتجاه
نستخدم حاليًا المرشحات لتحويل القيمة من النموذج قبل عرضه في العرض. ومع ذلك ، من الممكن أيضًا تحديد مرشح يحول القيمة من العرض (<pection> العنصر) قبل كتابته مرة أخرى إلى النموذج:
vue.filter ('currencydisplay' ، {// model -> view // تنسيق القيمة قبل تحديث `<prope>` element read: function (val) {return '$' +val.tofixed (2)} ، '') إرجاع isnan (رقم)؟المعلمات الديناميكية
إذا لم يتم لف معلمة المرشح في عروض الأسعار ، فسيتم حسابها ديناميكيًا ضمن نطاق VM الحالي. أيضًا ، تشير وظيفة التصفية هذه دائمًا إلى VM التي تسميها. على سبيل المثال:
<input v-model = "userInput"> <span> {{msg | concat userinput}} </span> vue.filter ('concat' ، function (value ، input) {// `input` ===` this.userInput` قيمة الإرجاع + الإدخال})المثال أعلاه بسيط نسبيًا ، ويمكنك أيضًا استخدام التعبيرات لتحقيق نفس النتيجة ، ولكن بالنسبة للمنطق الأكثر تعقيدًا ، هناك حاجة إلى أكثر من عبارة واحدة ، وتحتاج إلى وضعها في خاصية محسوبة أو مرشح مخصص.
مرشحات مدمجة مرشح ومرشح Orderby/فرز المصفوفات الواردة بناءً على الحالة الحالية لمثيل VUE الذي ينتمي إليه.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.