پیچیدگیهای جهان را ساده میکنند و به نوید یقینی سستبنیاد، ریشههای شک و کنجکاوی را، که دو شرط اول تفکرند، برمیکنند.
مقدمه ای بر 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 است می توانید به مقاله زیر برای مطالعه بیشتر مراجعه کنید.
کدهای این آموزش در لینک های زیر قرار دارد:
مطلبی دیگر از این انتشارات
آموزش (Vue.js و Declarative Rendering)
مطلبی دیگر از این انتشارات
مسیر (RoadMap) یادگیری فرانت اند
مطلبی دیگر از این انتشارات
سایت چند زبانه در nuxt js