الاستخدام الأساسي
يمكنك استخدام التوجيه V-Model لإنشاء ربط بيانات ثنائية الاتجاه على عناصر التحكم في النموذج. يقوم تلقائيًا بتحديد الطريقة الصحيحة لتحديث العنصر وفقًا لنوع التحكم. على الرغم من سحرية بعض الشيء ، فإن نموذج V ليس سوى السكر النحوي ، وتحديث البيانات في أحداث إدخال المستخدم ، والتعامل مع بعض الأمثلة المتطرفة على وجه الخصوص.
نص
<span> الرسالة هي: {{message}} </span> <br> <input type = "text" v-model = "message" placeholder = "edit me">مربع الاختيار
مربع اختيار واحد ، القيمة المنطقية:
<type type = "checkbox" id = "checkbox" v-model = "checked"> <label for = "checkbox"> {{checked}} </billy>خانات الاختيار المتعددة ، مرتبطة بنفس الصفيف:
<type type = "checkbox" id = "jack" value = "jack" v-model = "checkedNames"> <label = "jack"> jack </label> <input type = "checkbox" id = "joh" value = "John" v-model = "mike" v-model = "checkedNames"> <label for = "mike"> mike </billy> <br> <span> الأسماء المحددة: {{checkedNames | json}} </span> New Vue ({el: '...' ، البيانات: {checkedNames: []}})راديو
<type type = "radio" id = "one" value = "one" v-model = "picked"> <label for = "one"> واحد </label> <br> <brant type = "radio" id "id =" value = "اثنين" v-model = "picked"> <label for = "اثنين" </label> <br> <span>
يختار
اختيار واحد:
<حدد V-Model = "SELECTE"> <section> a </point> <borting> b </point> <bort> c </soph> </edread> <span> محدد: {{select}} </span>الاختيار من متعدد (ارتباط صفيف):
<حدد v-model = "محدد" multire> <select> a </soph> <borting> b </soph> <borting> c </soph> </select> <br> <span> تم تحديده: {{محدد | json}} </span>الخيارات الديناميكية ، عرض مع v-for:
<حدد V-model = "select"> <الخيار v-for = "الخيار في الخيارات" v-bind: value = "Option.value"> {{ortive.text}} </point New Vue ({el: '...' ، البيانات: {محدد: 'a' ، الخيارات: [{text: 'One' ، value: 'a'} ، {text: 'two' ، value: 'b'} ، {text: 'three' ، value: 'c'}}})قيمة الربط
بالنسبة لأزرار الراديو وخيارات الاختيار وخيارات الصندوق ، عادة ما تكون القيمة المرتبطة بواسطة V-Model سلسلة ثابتة (قيمة منطقية لمربحات الاختيار):
<!-عند تحديدها ، "تم اختياره" هو السلسلة "A"-> <input type = "radio" v-model = "picked" value = "a"> <!-`toggle` هو صحيح أو خطأ-> <input type =" checkbox "v-model =" toggle "> <! value = "ABC"> ABC </soph> </select>
لكن في بعض الأحيان نريد ربط القيمة بخاصية ديناميكية لمثيل VUE ، والتي يمكن تنفيذها باستخدام V-bind ، وقد لا تكون قيمة هذه الخاصية سلسلة.
مربع الاختيار
<type type = "checkbox" v-model = "toggle" v-bind: true-value = "a" v-bind: false-value = "b"> // عند تحديد vm.toggle === vm.a // عند عدم تحديد vm.toggle === vm.b
راديو
<type type = "radio" v-model = "pick" v-bind: value = "a"> // عند تحديد vm.pick === vm.a
حدد الخيارات
<حدد v-model = "select"> <!-كائن حرفي-> <الخيار v-bind: value = "{number: 123}"> 123 </potion> </select> // عند تحديد typeof vm.selected //-خصائص المعلمة
كسول
بشكل افتراضي ، يقوم V-Model بمزامنة قيم مربع الإدخال والبيانات في حدث الإدخال. يمكنك إضافة ميزة كسول للمزامنة في حدث التغيير:
<!-تحديث في "تغيير" بدلاً من حدث "الإدخال"->
<input v-model = "msg" lazy>
رقم
إذا كنت ترغب في تحويل إدخال المستخدم تلقائيًا إلى نوع الرقم (ارجع إلى القيمة الأصلية إذا كانت نتيجة التحويل للقيمة الأصلية هي NAN) ، فيمكنك إضافة رقم ميزة:
<إدخال V-Model = "Age" رقم>
Debounce
يضع Debounce الحد الأدنى من التأخير ، مما يؤدي إلى تأخير قيمة مربع الإدخال والبيانات بعد كل نقرة. من المفيد إذا كان عليك إجراء عمليات مستهلكة عالية كل تحديث (مثل طلب AJAX في موجه الإدخال).
<input v-model = "msg" debounce = "500">
لاحظ أن معلمة Debounce لا تؤخر حدث الإدخال: إنها تؤخر "كتابة" البيانات الأساسية. لذلك ، عند استخدام Debounce ، يجب استخدام vm. $ watch () للرد على التغييرات في البيانات. إذا كنت ترغب في تأخير حدث DOM ، فيجب عليك استخدام مرشح Debounce.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.