v-model الربط ثنائي الاتجاه لحقول النماذج
آخر تحديث: 2026-10-22
v-model الربط ثنائي الاتجاه لحقول النماذج
ينشئ v-model ربطًا ثنائي الاتجاه بين أداة النموذج والبيانات: الكتابة تُحدِّث الحالة، والحالة تُحدِّث الأداة.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<input v-model="name">
<textarea v-model="desc"></textarea>
<input type="checkbox" v-model="agree">
<select v-model="city"><option>Wuhan</option></select>⚙️ الوسائط
| expression | خاصية الحالة المطلوب ربطها؛ وتضبط المعدِّلات .lazy و.number و.trim سلوك المزامنة |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Typing in the input updates the greeting in real time.💡 نقاط مهمة
💡 نصيحة يحوِّل المعدِّل .number القيمة إلى عدد — وهو أساسي للتعامل مع الأرقام.
ℹ️ ملاحظة مربع الاختيار المرتبط بمصفوفة يجمع قيمًا متعددة؛ وإذا رُبط بقيمة منطقية فكان مفتاح تبديل واحدًا.
⚠️ تحذير v-model سكر نحوي لـ :value مع @input؛ وفي المكوّنات المخصصة يُعرَّف عبر modelValue أو defineModel().
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل القيمة المرتبطة عدد أم نص؟
ج نصوص افتراضيًا — أضف .number، خصوصًا للحقول الرقمية.
س كيف يعمل v-model على مكوّن مخصص؟
ج صرِّح عن prop باسم modelValue مع update:modelValue (أو استخدم defineModel() في 3.4 فأعلى).
س هل يمكن لعدة حقول ربط الحالة نفسها؟
ج نعم — تبقى جميعها متزامنة؛ تعديل أحدها يُحدِّث البقية فورًا.
