جلسه ششم: دستورهای شرطی در Vue.js

در جلسه پنجم، با بررسی شیوه ارتباط بین کلاس‌ها، استایل‌ها و کامپوننت‌ها به اطلاعات بسیار مفیدی دست‌پیدا کردیم. مهم‌ترین بخش هر زبان برنامه‌نویسی و فریم‌ورک دستورهای شرطی و کنترلی آن است. در این بخش به آموزش دقیق تمام دستورهای شرطی Vue.js می‌پردازیم.

دستور شرطی v-if

همواره درون قالب HTML وب سایت خود، گاهی نیاز به استفاده از دستور شرطی if است، تا اگر شرط برقرار بود، المان یا شیء نمایش داده شود یا خیر! به مثال زیر توجه کنید:

{{ #if ok }}
	<h1> نمایش بده </h1>
{{ /if }}

در فریم‌ورک Vue.js، می‌توان دستور شرطی v-if را نیز به صورت کد زیر اجرا کرد:

<h1 v-if="ok">نمایش بده</h1>

همچنین امکان قرار دادن بلوک else در ساختار شرطی وجود دارد که با عبارت v-else مشخص می‌شود:

<h1 v-if="ok">متن شماره ۱ را نمایش بده</h1>
<h1 v-else>متن شماره ۲ را نمایش بده</h1>

با توجه به اینکه v-if یک دستور است، فقط به المان‌های تکی اضافه می‌شود. اما اگر ما بخواهیم تعداد زیادی از المان‌ها را با شرط v-if نمایش دهیم باید از چه ساختاری استفاده کنیم؟ در این شرایط می‌توان v-if را داخل یک المان <template> قرار داد. که به عنوان یک بسته‌بندی نامرئی و مخفی در المان‌ها عمل می‌کند. به کد زیر توجه کنید:

<template v-if="ok">
	<h1>عنوان</h1>
	<p>پاراگراف اول</p>
	<p>پاراگراف دوم</p>
</template>

برای استفاده از ساختار else if در فریم‌ورک Vue.js می‌توان از دستور v-else-if استفاده کرد، این دستور را می‌توان به تعداد دلخواه در برنامه‌ی خود بکار ببرید. به مثال زیر توجه کنید:

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>

همانند ساختار v-else، دستور v-else-if به همراه یک دستور v-if بوجود میاد و به خودی خود معنایی نخواهد داشت.

کنترل کردن المان‌های قابل استفاده با المان key

تیم اجرایی فریم‌ورک Vue.js تمام تلاش خود را جهت کارآمدتر کردن این فریم‌ورک انجام می‌دهند تا بسیاری از رندرینگ‌ها (اجرای عملیات‌ها) قابل استفاده باشند و نیازی به از ابتدا رندر کردن آنها، نباشد. این موضوع علاوه بر کمک کردن به طراح و برنامه‌نویس، بسیار قابل استفاده و مفید خواهد بود. مثلا فرض کنید شما نیاز به فرمی دارید که با کلیک کردن روی دکمه‌ی خاص، فرم خاصی را برای شما نمایش دهد:

<template v-if="loginType === 'username'">
	<lable> Username </lable>
	<input placeholder = "Enter your username">
</template>
<template v-else>
	<lable> Email </lable>
	<input placeholder = "Enter your email address">
</template>

پس در کد بالا، با تغییر وضعیت loginType آنچه که کاربر وارد کرده است حذف نخواهد شد. از آنجا که در دو قالب (template) بالا المان input یکسان می‌باشد، اطلاعات وارد شده توسط کاربر جایگزین نمی‌شود، بلکه فقط placeholder آن تغییر می‌کند.

جهت مشاهده خروجی کد بالا اینجا کلیک کنید.

این خروجی مطلوب و مورد پسند ما نیست، بنابراین Vue.js یک راه پیشنهادی دارد و آن: «این دو اِلمان کاملا از هم مجزا هستند، مجددا از آنها استفاده نکنید.» تنها یک صفت تحت عنوان key با مقادیر یکتا، این مشکل را برطرف خواهد کرد. به مثال زیر توجه کنید:

<template v-if="loginType === 'username'">
	<lable> Username </lable>
	<input placeholder = "Enter your username" key="username-input">
</template>
<template v-else>
	<lable> Email </lable>
	<input placeholder = "Enter your email address" key="email-input">
</template>

خروجی این مثال را اینجا ملاحظه کنید.

دستور شرطی v-show

ویژگی‌های دیگری برای نمایش شرطی المان‌ها وجود دارد که با استفاده از دستور شرطی v-show امکان‌پذیر می‌باشند. در بسیاری از موارد مثال زیر به کار برده می‌شود:

<h1 v-show="ok">Hello Roxo.ir</h1>

تفاوت اصلی این است که المانی که همراه با v-show می‌باشد، همواره رندر می‌شود و در DOM باقی می‌ماند. در واقع دستور v-show معادل ویژگی display در CSS، عمل می‌کند.

نکته: دستور v-show داخل قالب‌ها <template> همانند دستور v-if کار نمی‌کند یا به عبارتی قالب‌ها این دستور را پشتیبانی نمی‌کنند. همچنین نمی‌توان در مقابل این دستور از عبارت v-else استفاده کرد.

تفاوت بین دستور شرطی v-show و v-if

دستور شرطی v-if به عنوان یک دستور شرطی کاملا واقعی مورد استفاده قرار می‌گیرد. یعنی متناسب با هر رویدادی که از طرف کاربر اعمال می‌شود این دستور فعال یا غیرفعال می‌شود.

دستور شرطی v-if کارها را به تعویق می‌اندازد یا به اصطلاح lazy می‌باشد. این ویژگی بدین معنی‌ست که اگر شرط اولیه برای یک بلوک <template> برقرار نباشد، محتویات آن بلوک بررسی نمی‌شوند و این سرعت اجرا و برنامه‌ی ما را افزایش می‌دهد.

در مقابل دستور v-if، دستور v-show ساده‌تر به‌نظر می‌رسد. یک المان بدون درنظر گرفتن شرایط اولیه آن همواره بررسی می‌شود و این دستور بسیار شبیه به ویژگی display در زبان CSS است.

بنابراین دستور v-if برای مواردی که شرایط در طول برنامه تغییر نمی‌کنند مناسب است درحالیکه v-show، اغلب برای حالتی که تغییر وضعیت هر چیزی ممکن است، اتفاق بیافتد، پیشنهاد می‌شود.

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.