v-else

Misol

Yuqoridagi barcha shartlar "false" bo‘lganda <div> elementini yaratish uchun v-else direktivasidan foydalanish.

<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'</p>
<div v-else>
  <img src="/img_question.svg" alt="question mark">
  <p>The word is not 'apple', and it is not 'pizza'</p>
</div>

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

v-else direktivasi if operatoridagi yuqoridagi barcha shartlar "false" qiymatini berganda elementni render qilish uchun ishlatiladi.

v-else direktivasi faqat v-if yoki v-else-if bo‘lgan elementdan keyin ishlatilishi mumkin.

v-else direktivasi ifodasiz ishlatiladi.

v-else elementning yoqib-o‘chirilishiga sabab bo‘lganda:

Element DOMga kirayotganda va undan chiqayotganda animatsiya qo‘llash uchun o‘rnatilgan <Transition> komponentidan foydalanishimiz mumkin.
"mounted" va "unmounted" kabi lifecycle hook’lari ishga tushadi.

Shartli render qilish uchun direktivalar

Ushbu umumiy ko‘rinish shartli render qilish uchun ishlatiladigan turli Vue direktivalari qanday birgalikda qo‘llanilishini tavsiflaydi.

Direktiva	Tafsilotlar
v-if	Alohida yoki v-else-if va/yoki v-else bilan birga ishlatilishi mumkin. Agar v-if ichidagi shart "true" bo‘lsa, v-else-if yoki v-else hisobga olinmaydi.
v-else-if	v-if yoki boshqa v-else-if’dan keyin ishlatilishi kerak. Agar v-else-if ichidagi shart "true" bo‘lsa, undan keyin keladigan v-else-if yoki v-else hisobga olinmaydi.
v-else	Agar if operatorining birinchi qismi false bo‘lsa, shu qism bajariladi. U if operatorining eng oxirida, v-if va v-else-if’dan keyin joylashtirilishi kerak.

Ko‘proq misollar

1-misol

Yozuv mashinkalari soni 0 ga teng bo‘lganda “Not in stock” deb yozish uchun v-else’dan foydalanish.

<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>

O‘zingiz sinab ko‘ring »

2-misol

Gapda "pizza" yoki "burrito" so‘zlari bo‘lmaganda ma’lum matnni ko‘rsatish uchun v-else’dan foydalanish.

<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</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>

O‘zingiz sinab ko‘ring »

Tegishli sahifalar

Vue darsligi: Vue v-if direktivasi

Vue ma’lumotnomasi: Vue v-if direktivasi

Vue ma’lumotnomasi: Vue v-else-if direktivasi

Vue darsligi: Vue animatsiyalari

Vue qo‘llanmasi: Vue lifecycle hook’lari

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish