v-else-if (v-else-if)
«v-else-if» یعنی «حالت دوم شرط». «دایرکتیو (Directive)» دستور قالب است. این دستور فقط بعد از «v-if» یا یک «v-else-if» دیگر می آید. سپس، بر اساس شرط، عنصر را می سازد یا حذف می کند. مثل کاربرگ نمره: عالی، خوب، یا ضعیف.
تعریف و ترتیب استفاده
اول «v-if» می آید. سپس می توانی چند «v-else-if» بزنی. در پایان، اگر خواستی «v-else» بگذار. هر بخش فقط وقتی اجرا می شود که قبلی ها درست نباشند.
نکته: «v-else-if» باید بلافاصله بعد از «v-if» یا «v-else-if» قبلی بیاید. بینشان تگ دیگری نگذار.
مثال پایه: انتخاب متن و تصویر بر اساس کلمه
<template>
<div v-if="word === 'apple'">
<img src="/img_apple.svg" alt="apple">
<p>The value of the 'word' property is 'apple'.</p>
</div>
<div v-else-if="word === 'pizza'">
<img src="/img_pizza.svg" alt="pizza">
<p>The value of the 'word' property is 'pizza'</p>
</div>
</template>
<script>
export default {
data() {
return {
word: 'pizza'
};
}
};
<\/script>
زنجیره حالت ها با مقدار عددی
مثل انبار فروشگاه فکر کن. اگر زیاد بود «In stock». اگر کم بود «Very few left!». وگرنه «Not in stock».
<template>
<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>
</template>
<script>
export default {
data() {
return {
typewriterCount: 2
};
}
};
<\/script>
استفاده از متدهای JS در شرط
می توانی از includes استفاده کنی. اگر «pizza» نبود، سراغ «burrito» برو. در نهایت حالت پیش فرض را نشان بده.
<template>
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg" alt="pizza">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg" alt="burrito">
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
</template>
<script>
export default {
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
};
}
};
<\/script>
همراهی با Transition برای تعویض نرم
با «<Transition>» می توانی جابه جایی بین تصاویر را نرم کنی. حالت ها با «v-else-if» می چرخند.
<template>
<h1>mode="out-in"</h1>
<p>Click the button to get a new image.</p>
<button @click="indexNbr++">Next image</button>
<Transition mode="out-in">
<img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
<img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
<img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
<img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
<img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
</Transition>
</template>
<script>
export default {
data() {
return {
imgs: ['pizza', 'apple', 'cake', 'fish', 'rice'],
indexNbr: 0
};
},
computed: {
imgActive() {
if (this.indexNbr >= this.imgs.length) {
this.indexNbr = 0;
}
return this.imgs[this.indexNbr];
}
}
};
<\/script>
<style scoped>
.v-enter-active {
animation: swirlAdded 0.7s;
}
.v-leave-active {
animation: swirlAdded 0.7s reverse;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
img {
width: 100px;
margin: 20px;
}
img:hover {
cursor: pointer;
}
</style>
گام های عملی
- شرط اول را با «v-if» تعریف کن.
- حالت های بعدی را با «v-else-if» اضافه کن.
- در پایان، «v-else» را برای حالت پیش فرض بگذار.
هشدار: «v-if» و «v-for» را روی یک تگ قاطی نکن. اولویت ها مشکل می سازند.
برای یادگیری بیشتر: v-if، v-else، و انیمیشن ها. همچنین خود دایرکتیو v-else-if را مرجع کن.
جمع بندی سریع
- «v-else-if» فقط بعد از «v-if» می آید.
- هر شاخه فقط یک بار ارزیابی می شود.
- در پایان، «v-else» حالت پیش فرض است.
- برای جلوه بهتر، از «Transition» کمک بگیر.