v-else (v-else)
اینجا با «دستور (Directive)» v-else در ویو آشنا می شویم. دستور یعنی برچسب راهنما برای قالب. با آن به ویو می گوییم چه چیزی را نشان دهد. تمرکز ما «دستور v-else ویو» است. مثل بازی، اگر شرط ها نباشند، مرحله آخر اجرا می شود.
v-else چیست و کِی اجرا می شود؟
v-else فقط وقتی اجرا می شود که همه شرط های قبلی نادرست باشند. «نادرست» یعنی نتیجه شرط false شود. باید بلافاصله بعد از v-if یا v-else-if بیاید. هیچ عبارت شرطی هم روی خودش نمی گیرد.
DOM یعنی ساختار صفحه وب. وقتی v-else عنصر را جابجا می کند، ورود و خروج آن در DOM رخ می دهد. می توانیم با <Transition> انیمیشن بدهیم. «Lifecycle hooks» مثل mounted و unmounted هم در همین تغییرات فعال می شوند.
نکته: اگر v-if درست باشد، دیگر v-else-if و v-else بررسی نمی شوند. ترتیب خیلی مهم است.
نمونه پایه با v-if / v-else-if / v-else
در این مثال، اگر کلمه «apple» نبود و «pizza» هم نبود، بخش v-else نمایش می شود. مانند آزمون مدرسه: اگر گزینه 1 درست نبود و 2 هم نبود، گزینه «سایر» می آید.
<div id="app">
<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'.</p>
<div v-else>
<p>The word is not 'apple', and it is not 'pizza'</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
word: 'pear';
};
}
});
app.mount('#app');
<\/script>
هشدار: v-else را دقیقاً بعد از v-if یا v-else-if قرار بده. فاصله یک عنصر دیگر نگذار.
مثال فروشگاه: موجودی و پیام جایگزین
اگر تعداد زیاد بود، «In stock» می بینیم. اگر کم بود، «Very few left!». در بقیه حالت ها، v-else می گوید: «Not in stock».
<div id="app">
<p v-if="typewriterCount > 3">In stock</p>
<p v-else-if="typewriterCount > 0">Very few left!</p>
<p v-else>Not in stock</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
typewriterCount: 0;
};
}
});
app.mount('#app');
<\/script>
مثال متن: جستجوی واژه ها
اگر متن شامل «pizza» نبود و «burrito» هم نبود، پیام v-else نمایش می شود. مثل جستجو در موبایل؛ اگر هیچ نتیجه نبود، پیام «یافت نشد» می آید.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like Thai beef salad, pho soup and tagine.';
};
}
});
app.mount('#app');
<\/script>
گام های عملی سریع
- اول شرط اصلی را با
v-ifبنویس. - بعد شرط های فرعی را با
v-else-ifبیفزا. - در پایان،
v-elseرا بدون شرط قرار بده. - در صورت نیاز، از
<Transition>برای انیمیشن استفاده کن.
برای شروع بهتر با شرط ها، صفحه v-if را ببین. همچنین درباره شاخه میانی به v-else-if سر بزن. برای دسترسی سریع، این لینک داخلی با کلیدواژه ماست: دستور v-else ویو.
جمع بندی سریع
v-elseفقط در انتها می آید.- هیچ شرطی روی
v-elseنیست. - بعد از
v-ifیاv-else-ifبیاید. - برای انیمیشن از
<Transition>کمک بگیر. - هوک ها در ورود و خروج اجرا می شوند.