Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Vue v-if

Vue-dagi shartga qarab HTML elementini yaratish oddiy JavaScript-ga qaraganda v-if direktivasi bilan ancha oson.

Vue bilan siz shartli ravishda yaratmoqchi bo‘lgan HTML elementiga to‘g‘ridan-to‘g‘ri if-iborasini yozasiz. Bu juda oddiy.

ULASHISH

Vue-da shartli ko‘rsatish

Vue-da shartli renderlash v-if, v-else-if va v-else direktivalari yordamida amalga oshiriladi.

Shartli ko‘rsatish HTML elementi faqat shart rost bo‘lsa yaratiladi, ya’ni agar o‘zgaruvchi "to‘g‘ri" bo‘lsa "Stokda" matni yaratiladi, agar o‘zgaruvchi "noto‘g‘ri" bo‘lsa, "Stokda yo‘q" matni yaratiladi.

Misol

Stokda yozuv mashinkalari bor yoki yo‘qligiga qarab turli xil xabarlarni yozing:

<p v-if="typewritersInStock">
  in stock
</p>

<p v-else>
  not in stock
</p>
O‘zingiz sinab ko‘ring »

Vuedagi shartlar

Shart yoki "agar-operator" bu haqiqat yoki noto‘g‘ri bo‘lgan narsadir.

Shart ko‘pincha yuqoridagi misoldagi kabi ikkita qiymat o‘rtasida bir qiymat boshqasidan kattaroq yoki yo‘qligini tekshirish uchun taqqoslashdir.

  • Bunday tekshirishlarni amalga oshirish uchun biz <, >= yoki !== kabi taqqoslash operatorlaridan foydalanamiz.

  • Taqqoslash tekshiruvlari && yoki || kabi mantiqiy operatorlar bilan ham birlashtirilishi mumkin.

  • JavaScript taqqoslashlari haqida ko‘proq ma’lumot olish uchun JavaScript o‘quv sahifamizga o‘ting.

Saqlashda mavjud yoki yo‘qligini aniqlash uchun biz saqlashdagi yozuv mashinkalari sonini taqqoslash tekshiruvi bilan ishlatishimiz mumkin:

Misol

Saqlashdagi yozuv mashinkalari soniga qarab “Stokda” yoki “Stokda yo‘q” deb yozishni tanlash uchun taqqoslash tekshiruvidan foydalaning.

<p v-if="typewriterCount > 0">
  in stock
</p>

<p v-else>
  not in stock
</p>
O‘zingiz sinab ko‘ring »

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.

Yuqorida ko‘rsatilgan uchta ko‘rsatma bilan misolni ko‘rish uchun biz oldingi misolni v-else-if bilan kengaytirishimiz mumkin, shunda foydalanuvchi "Stokda", "Juda oz qoldi!" yoki "Stokda yo‘q":

Misol

Taqqoslash tekshiruvidan foydalanib, "Stokda", "Juda oz qoldi!" yoki saqlashdagi yozuv mashinkalari soniga qarab "Stokda yo‘q".

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

Funksiyadan qaytariladigan qiymatdan foydalaning

v-if direktivasi bilan taqqoslash tekshiruvidan foydalanish o‘rniga biz funksiyadan "haqiqiy" yoki "noto‘g‘ri" qaytish qiymatidan foydalanishimiz mumkin:

Misol

Agar ma’lum bir matnda "pitsa" so‘zi bo‘lsa, tegishli xabar bilan

tegini yarating. 'Includes()' usuli matnda ma’lum so‘zlarni o‘z ichiga olganligini tekshiradigan mahalliy JavaScript usulidir.

<div id="app">
  <p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
  <p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
  return {
    text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
  }
}
O‘zingiz sinab ko‘ring »

Yuqoridagi misol v-if

va teglari kabi boshqa teglarni ham yaratishi mumkinligini ko‘rsatish uchun kengaytirilishi mumkin:

Misol

Agar ma’lum bir matnda "pitsa" so‘zi bo‘lsa, pizza tasviri bilan

tegini va xabarli

​​tegini yarating. "Includes()" usuli - bu matnda ma’lum so‘zlarni o‘z ichiga olganligini tekshiradigan mahalliy JavaScript usuli.

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

Quyida misol yanada kengaytirilgan.

Misol

Agar ma’lum bir matnda "pitsa" yoki "burrito" so‘zlari bo‘lsa yoki bu so‘zlarning hech biri bo‘lmasa, turli xil tasvirlar va matnlar yaratiladi.

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

Vue yordamida biz an’anaviy JavaScript-ga qaraganda ma’lum sharoitlarda elementlarni yaratadigan kodni yozishimiz mumkin.

Vue mashqlari

O‘zingizni mashqlar bilan sinab ko‘ring

Mashq:

Vue "typewritersInStock" mantiqiy ma’lumotlar xususiyatiga qarab biz uchun quyidagi

tegining ko‘rinishini o‘zgartirishi uchun yetishmayotgan qismni to‘ldiring.

<div id="app">
  <p ="typewritersInStock">
    in stock
  </p>
  <p >
    not in stock
  </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      typewritersInStock: true
    }
  }
})
app.mount('#app')
</script>

Mashqni boshlash

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish