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

 

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

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

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

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

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

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

<h1 v-if="ok">متن شماره 1 را نمایش بده</h1>
<h1 v-else>متن شماره 2 را نمایش بده</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 HamyarLaravel.com</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 است.