v-else-if

Misol

Shart "true" bo‘lsa, <div> elementini yaratish uchun v-else-if direktivasidan foydalanish.

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

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

v-else-if direktivasi elementni shartli ravishda render qilish uchun ishlatiladi.

v-else-if direktivasi faqat v-if’ga ega elementdan keyin yoki v-else-if’ga ega boshqa elementdan keyin ishlatilishi mumkin.

Elementda v-else-if ishlatilganda, undan keyin ifoda kelishi kerak:

Agar ifoda qiymati "true" bo‘lsa, element va uning butun mazmuni DOMda yaratiladi.
Agar ifoda qiymati "false" bo‘lsa, element yo‘q qilinadi.

Element v-else-if yordamida yoqib-o‘chirilganda:

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

Omborda faqat 1, 2 yoki 3 ta yozuv mashinkasi qolgan bo‘lsa, "Very few left!" deb yozish uchun v-else-if’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 "burrito" so‘zi bo‘lsa, ma’lum matn va rasmni ko‘rsatish uchun v-else-if’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 taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>

O‘zingiz sinab ko‘ring »

3-misol

Rasmlarni birma-bir almashtirib ko‘rsatish uchun v-else-if zanjiridan, animatsiyalar yaratish uchun esa <Transition> komponentidan foydalanish.

App.vue:

<template>
  <h1>mode="out-in"</h1>
  <p>Click the button to get a new image.</p>
  <p>With mode="out-in", the next image is not added until the current image is removed. Another difference from the previous example, is that here we use computed prop instead of a method.</p>
  <button @click="indexNbr++">Next image</button><br>
  <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>

Misolni ishga tushirish »

Tegishli sahifalar

Vue darsligi: Vue v-if direktivasi

Vue ma’lumotnomasi: Vue v-if direktivasi

Vue ma’lumotnomasi: Vue v-else direktivasi

Vue darsligi: Vue animatsiyalari

Vue qo‘llanmasi: Vue lifecycle hook’lari

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish