مقدمه ای بر vue قسمت سوم(v-if , v-else...)

دستورات v-ifو v-else

در طراحی صفحات گاه پیش می آید که یک بلوک یا پنل یا هر عنصر دیگری از صفحه را در صورت تحقق یک شرط بخواهیم نمایش داده شود. مثال در تصویر زیر در صورتی که مقدار متغییر isA درست باشد در خروجی بلوک A چاپ شود در غیر این صورت بلوک B. برای حل مسائلی از این دست می توان از دستورات v-if ، v-else ، v-else-if استفاده کرد. به کد زیر توجه کنید:

خط ۳- درون تک با استفاده از دستور v-if تعیین می کنیم بلوک A در صورتی نمایش داده شود که مقدار شرط درست باشد. در این مثال خاص باید مقدار متغییر isA برابر true باشد

خط ۴- در صورتی که مقدار شرط درست نباشد بلوک B نمایش داده می شود.

ساختار حلقه تکرار

گاهی آرایه ای از داده ها را در اختیار داریم و می خواهیم آنها را در یک ساختار تکراری نمایش دهیم مثال فرض کنید لیستی از کاربران را در اختیار داریم و می خواهیم آنها را در یک جدول نمایش دهیم. برای نمایش این گونه ساختارها می توان از حلقه ها و دستور v-for استفاده کنیم. به مثال زیر توجه کنید:

در این مثال آرایه ای از user ها را در اختیار داریم می خواهیم آنها را درون یک جدول نمایش دهیم.

خط ۴- آرایه users را با استفاده از حلقه پیمایش کرده در هر مرحله یکی از عناصر آرایه را درون متغییر usr قرار داده و اندیس آرایه را درون متغییر index قرار می دهیم. در هر بار تکرار یک سطر ایجاد می شود.

منبع

یکی از سایت های آموزشی جالب در این زمینه سایت https://www.taniarascia.com است می توانید به مقاله زیر برای مطالعه بیشتر مراجعه کنید.

کدهای این آموزش در لینک های زیر قرار دارد: