3.0 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Control Flow | تدفق التحكم |
تدفق التحكم
الشرطية
باستخدام Vue.js ، يمكنك تحديد العارض لإظهار أو عدم إدخال جزء من الشفرة في النهاية الصفحة ، اعتمادا على بعض الشرط. على سبيل المثال ، تخيل إدخال نموذج ما يتطلب نصًا لا يقل عن 8 أحرف: إذا كان إدخال المستخدم أقل من 8 أحرف ، من رسالة خطأ يجب أن تظهر ؛ ولكن إذا كان الإدخال أطول من 8 ، يختفي الرسالة.
لكن لنجعل مثالًا أبسط. نحن نريد أن الشرط من exibition من أ رسالة إلى عداد:
`
This message is only rendered when the counter is greater than 10
let app = new Vue({ el: '#app', data: { counter: 0 } });
إذا ذهبت إلى وحدة التحكم والبدء في زيادة العداد ، عندما يعبر لدينا عتبة 10 ، سيتم عرض الرسالة! ثم، إذا كنت إنقاص counter ، سوف يخفي Vue.js الرسالة عندما يحصل counter على أقل من 10. لذلك ، نحن استخدم التوجيه v-if .
وقد تتسائل إذا كان هناك else لذلك if . وهناك v-else . لاحظ أن v-else سوف دائما
- نتوقع
v-ifقبل ذلك - يشير إلى أقرب
v-ifفي الصفحة
دعونا نغير قليلا من المثال الأول لدينا للحصول على هذا مستقيم.
`
This message is only rendered when the counter is greater than 10
And this is the "otherwise" option
let app = new Vue({ el: '#app', data: { counter: 0 } });
لعب قليلا مع ذلك عن طريق تغيير القيم counter والانتباه إلى الرسالة المعروضة.
لدى Vue.js أيضًا الأمر v-else-if .
الحلقات
يساعد Vue.js أيضًا على إنشاء نسخ متعددة من الشفرة نفسها هيكل ، مع حلقات. المثال الكلاسيكي هو قائمة تم تقديمها ديناميكيًا.
`
- {{ item }}
let app = new Vue({ el: '#app', data: { list: [ "shave", "do the dishes", "clean the sink", "pay the bill" ] } });
الطريقة أسهل من إدخال الكثير من <li> . ولاحظ أنه كلما list التغييرات ، والنتيجة ستتغير acordingly. جربه: افتح وحدة التحكم و push بعض الخيط إلى list مع
app.list.push("something else");
كما هو متوقع ، فإن الصفحة المقدمة الآن تحتوي على منتج جديد تمامًا!