ایجاد شرط با v-if

Create a Condition with v-if

به فصل جدید از سری آموزش رایگان Vue js از صفر تا صد خوش آمدید. در این فصل با دو مبحث کلی شرطی سازی و شرط ها و همچنین لیست ها آشنا خواهیم شد بنابراین بهتر است بدون مقدمه شروع کنیم. برای این فصل پروژه جدیدی را برای شما آماده کرده ام که به شکل زیر است.

کدهای HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <p>You can see me!</p>
    <p>Do you also see me?</p>
</div>

کدهای جاوا اسکریپت:

new Vue({
    el: '#app',
    data: {
        show: true
    }
})

بنابراین فقط یک خصوصیت به نام show داریم که روی True تنظیم شده است. در کدهای HTML نیز فقط دو پاراگراف ساده داریم. با اجرای کدهای بالا هر دو پاراگراف را مشاهده خواهیم کرد. برای ایجاد یک شرط در Vue می توانیم از directive ای به نام v-if استفاده کنیم، بنابراین:

<div id="app">
    <p v-if="show">You can see me!</p>
    <p>Do you also see me?</p>
    <button @click="show = !show">Switch</button>
</div>

من دکمه ای را اضافه کرده ام که به یک event listener (از نوع click) دارد و با کلیک شدن، خصوصیت show را برعکس مقدار فعلی اش می کند. همچنین v-if را به پاراگراف اول اضافه کرده و خصوصیت show را به آن پاس داده ام. یعنی اگر show صحیح (true) بود این پاراگراف نمایش داده خواهد شد. حالا اگر کدهای بالا را اجرا کرده و روی دکمه switch کلیک کنید، پاراگراف اول غیب می شود. با کلیک دوباره روی آن می توانیم پاراگراف را ظاهر کنیم. همچنین نکته جالب اینجاست که اگر با dev tools مرورگر به کد HTML نگاه کنید و دکمه switch را بزنید، متوجه می شوید که پاراگراف ما به طور کامل حذف می شود. در بسیاری از کتابخانه های جاوا اسکریپت به جای حذف شدن کامل <p> آن را با display مخفی می کنند اما دستور v-if در Vue اینطور نیست و عنصر به طور کل حذف می شود.

نکته بعدی این است که v-if مانند یک if عادی می تواند گسترش پیدا کند. به طور مثال:

<div id="app">
    <p v-if="show">You can see me!</p>
    <p v-else>Now you see me!</p>
    <p>Do you also see me?</p>
    <button @click="show = !show">Switch</button>
</div>

دستور v-else به اولین v-if پشت سر خود نگاه می کند و به آن مربوط می شود و دقیقا مانند else در جاوا اسکریپت عادی عمل می کند بنابراین اگر کد بالا را اجرا کنیم یکی از دو پاراگراف های اول و دوم نمایش داده می شوند. همچنین در نظر داشته باشید که v-else if یا شبیه به آن را نداریم. اگر می خواهید شرط دیگری داشته باشید باید از یک if دیگر استفاده کنید. مثلا:

<div id="app">
    <p v-if="show">You can see me!</p>
    <p v-if>Now you see me!</p>
    <p>Do you also see me?</p>
    <button @click="show = !show">Switch</button>
</div>

آپدیت مهم: در نسخه 2.1 از فریم ورک Vue دستور v-else-if نیز اضافه شده است و می توانید از آن استفاده کنید. برای اطلاعات بیشتر می توانید به این صفحه مراجعه نمایید.

نکته بعدی این است که v-if روی کل عنصر به همراه عناصر درونش اثر می گذارد. مثلا اگر کد زیر را داشته باشیم:

    <p v-if="show">You can see me! <span>Hello</span></p>

برقرار نشدن شرط if باعث دیده نشدن p و span می شود نه اینکه فقط روی p اثر بگذارد.

ترکیب v-if و تگ template

همچنین باید بدانید که دستور v-if قابلیت ترکیب با تگ template را نیز دارد. به طور مثال تصور کنید که یک template به شکل زیر داشته باشیم:

<div id="app">
    <p v-if="show">You can see me! <span>Hello</span></p>
    <p v-else>Now you see me!</p>
    <template>
        <p>Inside a template</p>
    </template>
    <p>Do you also see me?</p>
    <button @click="show = !show">Switch</button>
</div>

همانطور که می بینید تگ <template> یک تگ مربوط به HTML5 است و به صورت خودکار درون DOM نمایش داده نمی شود. بنابراین با اجرای کد بالا، تگ <p> که عبارت Inside a template است را مشاهده می کنیم اما خود تگ <template> وجود نخواهد داشت. شاید بپرسید چرا عنصری داریم که نمایش داده نمی شود. استفاده های زیادی برای چنین عنصری وجود دارد. مثلا یکی از استفاده های مربوط به کار ما، قرار دادن یک v-if روی آن است:

 <div id="app">
    <p v-if="show">You can see me! <span>Hello</span></p>
    <p v-else>Now you see me!</p>
    <template v-if="show">
        <p>Iside a template</p>
    </template>
    <p>Do you also see me?</p>
    <button @click="show = !show">Switch</button>
</div>

بدین شکل می توانیم نمایش داده شدن <p> درون template را فعال یا غیرفعال کنیم. احتمالا می پرسید که تفاوت بین استفاده از Template و عدم استفاده از آن (مثل کدهای قبلی) چیست؟ تفاوت اینجاست که می توانیم عناصر زیادی را درون template قرار بدهیم و همه را یکجا نمایش داده یا حذف کنیم. برخی از برنامه نویسان از یک div برای این کار استفاده می کنند اما ممکن است در برنامه شما اضافه کردن div باعث به هم خوردن صفحه بشود که در این حالت template انتخابی بسیار عالی است.

در نهایت سوالی پیش می آید: ما فهمیدیم که v-if کل عنصر را از DOM حذف یا به آن اضافه می کند اما اگر نخواهیم این کار را بکنیم چطور؟ اگر فقط بخواهیم عنصر مخفی شود اما از DOM حذف نشود چه کار باید کرد؟

راه حل شما استفاده از v-show بوده و نحوه کارش دقیقا مانند v-if می باشد:

    <p v-show="show">Do you also see me?</p>

حالا اگر کد بالا را به کدهایتان اضافه کرده و اجرا کنید، با کلیک روی switch این عنصر از DOM حذف نمی شود بلکه استایل display=none به آن اضافه خواهد شد. معمولا پیشنهاد می شود که تا حد ممکن از v-if استفاده کنید چرا که داشتن یک عنصر بی فایده در صفحه فقط باعث کندتر شدن آن می شود و فایده ای ندارد. V-show فقط برای حالت های بسیار خاص می باشد که نیاز دارید عنصری به صورت مخفی در صفحه باقی بماند.