การใช้งานขั้นพื้นฐาน
คุณสามารถใช้คำสั่ง V-model เพื่อสร้างการเชื่อมโยงข้อมูลสองทางบนองค์ประกอบการควบคุมแบบฟอร์ม จะเลือกวิธีที่ถูกต้องโดยอัตโนมัติเพื่ออัปเดตองค์ประกอบตามประเภทการควบคุม แม้ว่าจะมีมนต์ขลังเล็กน้อย แต่ V-model นั้นไม่มีอะไรนอกจากน้ำตาลวากยสัมพันธ์ แต่การอัปเดตข้อมูลในเหตุการณ์อินพุตของผู้ใช้และจัดการตัวอย่างที่รุนแรงโดยเฉพาะ
ข้อความ
<span> ข้อความคือ: {{message}} </span> <br> <input type = "text" v-model = "message" placeholder = "แก้ไขฉัน">ช่องทำเครื่องหมาย
ช่องทำเครื่องหมายเดี่ยวค่าตรรกะ:
<อินพุต type = "ช่องทำเครื่องหมาย" id = "ช่องทำเครื่องหมาย" v-model = "ตรวจสอบ"> <label for = "ช่องทำเครื่องหมาย"> {{checked}} </label>กล่องกาเครื่องหมายหลายกล่องถูกผูกไว้กับอาร์เรย์เดียวกัน:
<อินพุต type = "ช่องทำเครื่องหมาย" id = "jack" value = "jack" v-model = "checkedNames"> <label for = "jack"> jack </label> <input type = "ช่องทำเครื่องหมาย" id = "john" value = "john" v-model = "checkedNames"> <label for "john" v-model = "checkedNames"> <label for = "mike"> mike </label> <br> <pan> ชื่อที่ตรวจสอบ: {{checkedNames | JSON}} </span> ใหม่ vue ({el: '... ', data: {checkedNames: []}})วิทยุ
<input type = "Radio" id = "one" value = "one" v-model = "เลือก"> <label for = "one"> หนึ่ง </label> <br> <input type = "Radio" id = "two" value = "two" v-model = "เลือก"
เลือก
ตัวเลือกเดียว:
<เลือก v-model = "เลือก"> <ตัวเลือกที่เลือก> a </opturb> <pontion> b </opturb> <potion> c </optural> </elect> <pan> เลือก: {{selected}} </span>ตัวเลือกแบบปรนัย (ผูกกับอาร์เรย์):
<เลือก v-model = "selected" multiple> <เลือกตัวเลือก> a </opturb> <pontion> b </opotion> <potion> c </optural> </select> <br> <pan> เลือก: {{selected | JSON}} </span>ตัวเลือกแบบไดนามิกแสดงด้วย V-for:
<เลือก v-model = "เลือก"> <ตัวเลือก v-for = "ตัวเลือกในตัวเลือก" v-bind: value = "ตัวเลือก. value"> {{opture.text}} </petion> </select> <pan> เลือก: {{selected}} </span> ใหม่ vue ({el: '... ', data: {เลือก: 'a', ตัวเลือก: [{text: 'one', ค่า: 'a'}, {text: 'two', value: 'b'}, {text: 'สาม', ค่า: 'c'}]}}))ค่าผูก
สำหรับปุ่มตัวเลือกช่องทำเครื่องหมายและตัวเลือกกล่องค่าที่ถูกผูกไว้ด้วย V-model มักจะเป็นสตริงคงที่ (ค่าโลจิคัลสำหรับช่องทำเครื่องหมาย):
<!-เมื่อเลือก `เลือก 'คือสตริง" a "-> <อินพุต type =" วิทยุ "v-model =" เลือก "value =" a "> <!-` toggle` เป็นจริงหรือเท็จ-> <อินพุตประเภท = "ช่องทำเครื่องหมาย" v-model = "selected"> <! value = "abc"> abc </potion> </election>
แต่บางครั้งเราต้องการผูกค่ากับคุณสมบัติแบบไดนามิกของอินสแตนซ์ VUE ซึ่งสามารถนำไปใช้ได้โดยใช้ V-bind และค่าของคุณสมบัตินี้อาจไม่ใช่สตริง
ช่องทำเครื่องหมาย
<อินพุต type = "ช่องทำเครื่องหมาย" v-model = "สลับ" v-bind: true-value = "a" v-bind: false-value = "b"> // เมื่อเลือก vm.toggle === vm.a // เมื่อไม่เลือก vm.toggle === vm.b
วิทยุ
<input type = "Radio" V-model = "Pick" V-bind: value = "A"> // เมื่อเลือก vm.pick === vm.a
เลือกตัวเลือก
<เลือก v-model = "เลือก"> <!-อ็อบเจ็กต์ตัวอักษร-> <ตัวเลือก v-bind: value = "{หมายเลข: 123}"> 123 </ตัวเลือก> </select> // เมื่อเลือก typeof vm.selected //-> 'object'vm.selectedลักษณะพารามิเตอร์
ขี้เกียจ
โดยค่าเริ่มต้น V-model จะซิงโครไนซ์ค่ากล่องอินพุตและข้อมูลในเหตุการณ์อินพุต คุณสามารถเพิ่มคุณสมบัติที่ขี้เกียจในการซิงโครไนซ์ในเหตุการณ์การเปลี่ยนแปลง:
<!-อัปเดตใน "เปลี่ยน" แทนเหตุการณ์ "อินพุต"->
<อินพุต v-model = "msg" ขี้เกียจ>
ตัวเลข
หากคุณต้องการแปลงอินพุตของผู้ใช้เป็นประเภทหมายเลขโดยอัตโนมัติ (กลับไปที่ค่าดั้งเดิมหากผลการแปลงของค่าดั้งเดิมคือ NAN) คุณสามารถเพิ่มหมายเลขคุณสมบัติ:
<อินพุต v-model = "อายุ" หมายเลข>
การลบล้าง
Debounce ตั้งค่าการหน่วงเวลาขั้นต่ำล่าช้าค่ากล่องอินพุตและข้อมูลหลังจากการแตะแต่ละครั้ง มันมีประโยชน์หากคุณต้องดำเนินการที่ใช้เวลานานทุกการอัปเดต (เช่นคำขอ AJAX ในพรอมต์อินพุต)
<อินพุต v-model = "msg" debounce = "500">
โปรดทราบว่าพารามิเตอร์ debounce ไม่หน่วงเวลาเหตุการณ์อินพุต: มันล่าช้า "การเขียน" ข้อมูลพื้นฐาน ดังนั้นเมื่อใช้ debounce ควรใช้ vm. $ watch () เพื่อตอบสนองต่อการเปลี่ยนแปลงข้อมูล หากคุณต้องการชะลอเหตุการณ์ DOM คุณควรใช้ตัวกรอง Debounce
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น