هذه المقالة عبارة عن برنامج تعليمي مفصل وأكثر شمولاً تم تجميعه من قبل المحرر بالاشتراك مع المستندات الرسمية. من المناسب للغاية للمبتدئين أن يتعلموا. يمكن للأصدقاء المهتمين إلقاء نظرة!
المعلومات تأتي من الوثيقة الرسمية:
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"/> <viv> {{text}} </div> <viv> ― - ― - ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― قادر ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――� value = "firstcheckbox" v-model = "checkboxes"> firstCheckBox </balled> <br/> <label> <input type = "checkbox" value = "secondCheckBox" v-model = "checkboxes"> secondCheckBox </bably> <br label> <blable> <bordty type = <div> القيمة المحددة أعلاه هي: {{checkboxes}} </div> <div> القيمة المحددة أعلاه (معروضة بتنسيق JSON ، يتم استخدام مرشح JSON هنا): {{مربعات الاختيار | json}} </div> <viv> - ― - ― - ― - ― - - - - - - </div> v-model = "radio"/> value = a </bally> <br> <blable> <input type = "radio" value = "b" v-model = "radio"/> value = b </blist <viv> ―----------</div> <حدد v-model = "select"> value> value الافتراضية ، لا يعين الخيار القيمة </oper لا تسجل هنا ، سيتم إبلاغك بخطأ </div> <div> ― - ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― - ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― و. value = "a" a "a </portive> <opture value =" b "> b </point y المحور </div> <viv> ― - ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― بم ― - ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― ― قد ― ― ― ―o قد ٍ قد <billy> <input type = "checkbox" value = "b" v-model = "dynamic"> b </billy> <br/> <blabel> <input type = "checkbox" value = "c" v-model = "dynamic"> c </billy> <br/> value = "c"> c </soph> </select> <viv> حدد هو: {{dynamic}}} </div> <viv>-―-―------------―-----</div> خانة الشيكات المخصصة للقيم المحددة والمختارة </div> v-bind: false-value = "readivalues.f" v-model = "kervens"> true/false </blys> <br/> <viv> قيمة مختلفة: {{keries}} </div> لاحظ أن ما سبق لا يمكن استخدامه كصفيف كمتغير لعلامات الاختيار Vbovels مثل مربعات الاختيار العادية ، وقيمتها هي الخاصة بخصوصية مؤك لذلك ، لا يمكن أن تكون القيمة الموجودة في V-bind سلسلة ، ولكن يمكن أن تكون كائنًا ، مثل {A: 1} (بالطبع ، القيمة المعروضة في هذا الوقت هي أيضًا كائن) </div> <viv> ―-―-―-―-―--</div> <div> راديو مخصص </div> <sistr <blys> <input type = "radio" v-bind: value = "textarea" v-model = "conclize"/> value هي 1 </label> <viv> {{customize}} </div> <iv> بالمثل ، يمكن أن تكون القيمة خاصية VM أو كائن ، واختيار محدد أيضًا. (يتم اختيار الثلاثة الرئيسيين. بالإضافة إلى ذلك ، على الرغم من أنه تم اختيار نوع التاريخ أيضًا ، إلا أنه ليس ذا معنى كبير) </div> <viv> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ، ، فإن ". "هنا نص متعدد الخطوط/n ، // n هو سطر جديد ، ولكن يتم عرضه كمساحة في السلسلة".المعلمات ②add:
【1】 كسول
يتم تحديث القيمة فقط بعد إلغاء حالة التركيز ، وليس عند الضغط على المفتاح.
صالح لكل من مربعات إدخال النص و TextArea
كرمز:
<type type = "text" v-model = "text" lazy/> <viv> {{text}} </viv>【2】 الرقم
قم بتحويل قيمة الإدخال تلقائيًا إلى نوع الرقم ، وإذا تم تحويله إلى نوع NAN ، فسيعود إلى القيمة الأصلية ؛
كرمز:
<type type = "text" v-model = "text" number/> <viv> {{text}} </viv> <viv> {{typeof text}} </viv>إذا تمت إضافة رقم المعلمة ، فعند إدخال رقم ، يكون نوع المطالبة سلسلة. بعد إضافته ، سيطالب الرقم النقي بنوع الرقم ؛
【3】 debounce = "milliseconds"
عندما لا تتغير القيمة لعدة ميلي ثانية على التوالي ، يتم تشغيل تغيير قيمة المتغير ؛
كرمز:
<type type = "text" v-model = "text" debounce = "1000"/> <viv> {{text}} </div>عندما أدخل الأرقام الستة 1 ، 2 ، 3 ، 4 ، 5 ، 6 بالتسلسل مع اختلاف زمني قدره 500 مللي ثانية ، فلن يتم تحديث قيمة النص ؛
عندما أتوقف عن الإدخال يحتوي على 1000 مللي ثانية ، سيتم تحديث قيمة النص ؛
لذلك ، فهي مناسبة لعمليات الاستهلاك العالي مثل أياكس.
ما سبق هو مثال تحليل Vuejs وأمثلة العناصر النموذجية التي أدخلها المحرر لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!