freeCodeCamp/guide/arabic/vue/control-flow/index.md

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");

كما هو متوقع ، فإن الصفحة المقدمة الآن تحتوي على منتج جديد تمامًا!