บทความนี้เป็นบทช่วยสอนโดยละเอียดพร้อมรหัสรายละเอียดเพิ่มเติมที่รวบรวมโดยบรรณาธิการร่วมกับเอกสารอย่างเป็นทางการ เหมาะมากสำหรับผู้เริ่มต้นที่จะเรียนรู้ เพื่อนที่สนใจสามารถดูได้!
ข้อมูลมาจากเอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/forms.html
รูปแบบที่มีผลผูกพัน
①วิธีการผูกมัดทั่วไป:
【 1 】การเชื่อมโยงกล่องป้อนข้อความ
【 2 】การผูก textarea (คล้ายกับ [1]);
【 3 】การเลือกค่าวิทยุที่เลือก
【 4 】การเชื่อมโยงช่องทำเครื่องหมาย (อาร์เรย์มัดโดยอัตโนมัติไม่จำเป็นต้องใช้ชื่อ);
【 5 】เลือกการผูก;
【 6 】เลือกช่องทำเครื่องหมายการเลือกหลายรายการหลายรายการ
【 7 】การเชื่อมโยงแบบไดนามิก (ประเภทข้างต้น แต่ค่าเดียวกันสามารถโต้ตอบได้);
[8] ช่องทำเครื่องหมายที่เลือกและไม่ถูกตรวจสอบมีการกำหนดค่าที่แตกต่างกัน (ส่วนใหญ่สำหรับสถานะที่ไม่ได้ตรวจสอบ);
【 9 】ช่องทำเครื่องหมาย, วิทยุ, เลือกค่าที่เลือกการผูกแบบไดนามิก (ส่วนใหญ่หมายถึงวัตถุที่มีการเชื่อมโยงค่าไดนามิกหรือแอตทริบิวต์ของอินสแตนซ์ VM เช่นแอตทริบิวต์ที่แน่นอนในข้อมูลหรือค่าที่แน่นอนของการคำนวณ);
เป็นรหัส:
<div id = "app"> <input type = "text" v-model = "text"/> <div> {{text}} </div> <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ―― -------------------------------------------------------------------------------- value = "firstCheckBox" v-model = "ช่องทำเครื่องหมาย"> firstCheckBox </label> <br/> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = "secondCheckBox" v-model = "ช่องทำเครื่องหมาย"> secondCheckBox </label> <br/> <div> ค่าที่เลือกด้านบนคือ: {{copboxes}} </div> <div> ค่าที่เลือกข้างต้นคือ (แสดงในรูปแบบ JSON, ตัวกรอง JSON ถูกใช้ที่นี่): {{ช่องทำเครื่องหมาย | json}} </div> <div> v-model = "Radio"/> value = a </label> <br> <br> <blable> <input type = "Radio" value = "B" V-Model = "Radio"/>>>>>>>>>>>>>>>>>>> </label> <br> <br> <br> {{วิทยุ}} </div> <div>--------―――― </div> <เลือก v-model = "select"> <opovie> ค่าเริ่มต้นตัวเลือกไม่ได้ตั้งค่า </optup> <ตัวเลือกค่า = "b"> ค่าของค่าถูกตั้งค่าเป็น b </ตัวเลือก> <ตัวเลือกที่เลือกค่า = "c"> การเลือกค่าเริ่มต้น คุณไม่ได้ลงทะเบียนที่นี่คุณจะได้รับรายงานข้อผิดพลาด </div> <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ―― value = "a"> a </optup> <opovie value = "b"> b </ตัวเลือก> <ตัวเลือกค่า = "c"> c </optup> <ตัวเลือกค่า = "d"> d </optup> <ตัวเลือกค่า = "e"> e </optial> </select> <div> แกน y </div> <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ― - <lable> <อินพุต type = "ช่องทำเครื่องหมาย" value = "b" v-model = "ไดนามิก"> b </label> <br/> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = "c" v-model = "ไดนามิก"> c </label> <br/> <เลือก v-model = "dynamic" value = "c"> c </optup> </select> <div> เลือกคือ: {{dynamic}} </div> <div> ― ― ― ― ― ― ― ―――――― - ― ― ― ― ― V-bind: true-value = "distripaIndues.t" v-bind: false-value = "disterctvalues.f" v-model = "แตกต่างกัน"> true/false </label> <br/> <div> ค่าที่แตกต่างกัน: {{แตกต่างกัน}} </div> <div> การผูกมัดและอินสแตนซ์ VM; ดังนั้นค่าใน V-bind จึงไม่สามารถเป็นสตริงได้ แต่มันอาจเป็นวัตถุเช่น {a: 1} (แน่นอนค่าที่แสดงในเวลานี้เป็นวัตถุด้วย) </div> <div> ― ――-----------------------------เมอร์ <label> <อินพุต Type = "Radio" V-bind: value = "textarea" v-model = "ปรับแต่ง"/>>>> 1 </label> <div> {{ปรับแต่ง}} </div> <div> ในทำนองเดียวกันค่าอาจเป็นคุณสมบัติของ VM หรือวัตถุ (สามหลักถูกเลือกนอกจากนี้ถึงแม้ว่าประเภทวันที่จะถูกเลือก แต่ก็ไม่ได้มีความหมายมาก) </div> <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - {{{― ― ― ― "นี่คือข้อความหลายบรรทัด/n, // n เป็นบรรทัดใหม่ แต่มันจะแสดงเป็นพื้นที่ในสตริง"พารามิเตอร์② ADD:
【 1 】ขี้เกียจ
ค่าจะได้รับการอัปเดตหลังจากสถานะโฟกัสถูกยกเลิกมากกว่าเมื่อกดปุ่ม
ใช้ได้สำหรับทั้งกล่องอินพุตข้อความและ textarea
เป็นรหัส:
<input type = "text" v-model = "text" lazy/> <div> {{text}} </div>【 2 】จำนวน
แปลงค่าอินพุตเป็นประเภทหมายเลขโดยอัตโนมัติและหากแปลงเป็นประเภท NAN มันจะกลับไปเป็นค่าดั้งเดิม
เป็นรหัส:
<input type = "text" v-model = "text" หมายเลข/> <div> {{text}} </div> <div> {{typeof text}} </div>หากเพิ่มหมายเลขพารามิเตอร์แล้วเมื่อป้อนตัวเลขประเภทพรอมต์คือสตริง หลังจากเพิ่มจำนวนเงินบริสุทธิ์จะแจ้งประเภทตัวเลข
【 3 】 debounce =” มิลลิวินาที”
เมื่อค่าไม่เปลี่ยนแปลงสำหรับหลายมิลลิวินาทีในแถวการเปลี่ยนแปลงค่าของตัวแปรจะถูกทริกเกอร์;
เป็นรหัส:
<อินพุต type = "text" v-model = "text" debounce = "1000"/> <div> {{text}} </div>เมื่อฉันป้อนหมายเลขหก 1, 2, 3, 4, 5, 6 ตามลำดับที่มีความแตกต่างของเวลา 500ms ค่าของข้อความจะไม่ได้รับการอัปเดต
เมื่อฉันหยุดการป้อนข้อมูลมี 1,000ms ค่าข้อความจะได้รับการอัปเดต
ดังนั้นจึงเหมาะสำหรับการดำเนินงานที่บริโภคสูงเช่น AJAX
ข้างต้นคือการวิเคราะห์ตัวอย่างของ VueJs และตัวอย่างองค์ประกอบแบบฟอร์มที่แนะนำโดยตัวแก้ไขให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!