ฐาน
เช่นเดียวกับคำสั่งที่กำหนดเองตัวกรองที่กำหนดเองสามารถลงทะเบียนด้วยวิธีการทั่วโลก vue.filter () ซึ่งใช้สองพารามิเตอร์: ID ตัวกรองและฟังก์ชันตัวกรอง ฟังก์ชันตัวกรองใช้ค่าเป็นพารามิเตอร์และส่งคืนค่าที่แปลงแล้ว:
vue.filter ('ย้อนกลับ', ฟังก์ชัน (ค่า) {return value.split (''). reverse (). เข้าร่วม ('')})<!-'abc' => 'cba'-> <span v-text = "ข้อความ | ย้อนกลับ"> </span>
ฟังก์ชันตัวกรองสามารถรับพารามิเตอร์จำนวนใดก็ได้:
vue.filter ('wrap', ฟังก์ชั่น (ค่า, เริ่มต้น, สิ้นสุด) {return start + value + end})<!-'hello' => 'ก่อนสวัสดีหลังจาก'-> <span v-text = "ข้อความ | wrap 'ก่อน' 'หลังจาก'"> </span>
ตัวกรองสองทิศทาง
ขณะนี้เราใช้ตัวกรองเพื่อแปลงค่าจากรุ่นก่อนที่จะแสดงในมุมมอง อย่างไรก็ตามยังเป็นไปได้ที่จะกำหนดตัวกรองที่แปลงค่าจากมุมมอง (<put> องค์ประกอบ) ก่อนที่จะเขียนกลับไปยังโมเดล:
vue.filter ('currencyDisplay', {// model -> ดู // รูปแบบค่าก่อนอัปเดต `<put>` องค์ประกอบการอ่าน: ฟังก์ชั่น (val) {return '$' +val.tofixed (2)}, // view -> model // รูปแบบของค่าก่อนเขียนข้อมูลกลับ isnan (หมายเลข)?พารามิเตอร์แบบไดนามิก
หากพารามิเตอร์ตัวกรองไม่ได้ถูกห่อหุ้มด้วยเครื่องหมายคำพูดมันจะถูกคำนวณแบบไดนามิกภายในขอบเขต VM ปัจจุบัน นอกจากนี้ฟังก์ชั่นตัวกรองนี้ชี้ไปที่ VM ที่เรียกมันเสมอ ตัวอย่างเช่น:
<อินพุต v-model = "userInput"> <span> {{msg | concat userInput}} </span> vue.filter ('concat', ฟังก์ชั่น (ค่า, อินพุต) {// `input` ===` this.userInput` ค่าส่งคืน + อินพุต})ตัวอย่างข้างต้นค่อนข้างง่ายและคุณยังสามารถใช้นิพจน์เพื่อให้ได้ผลลัพธ์เดียวกัน แต่สำหรับตรรกะที่ซับซ้อนยิ่งขึ้นจำเป็นต้องใช้คำสั่งมากกว่าหนึ่งคำสั่งและคุณต้องใส่ไว้ในคุณสมบัติที่คำนวณหรือตัวกรองที่กำหนดเอง
ตัวกรองตัวกรองในตัวและตัวกรองคำสั่งซื้อ/เรียงลำดับอาร์เรย์ขาเข้าตามสถานะปัจจุบันของอินสแตนซ์ VUE ที่เป็นของมัน
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น