Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Vue v-show

V-show bilan elementni ko‘rinadigan yoki ko‘rinmasligini o‘rganing.

v-show-dan foydalanish oson, chunki shart HTML teg atributida to‘g‘ri yozilgan.

ULASHISH

Shartli ko‘rinish

v-show direktivasi shart "false" bo‘lsa, CSS "display" xususiyati qiymatini "none" ga o‘rnatish orqali elementni yashiradi.

V-show ni HTML atributi sifatida yozgandan so‘ng, teg ko‘rinadigan yoki ko‘rinmasligini hal qilish uchun shart qo‘yishimiz kerak.

Sintaksis

<div v-show="showDiv">This div tag can be hidden</div>

Yuqoridagi kodda "showDiv" xususiyat qiymati sifatida "true" yoki "yolg‘on" bo‘lgan mantiqiy Vue ma’lumotlar xususiyatini ifodalaydi. Agar "showDiv" "to‘g‘ri" bo‘lsa, div tegi ko‘rsatiladi va "noto‘g‘ri" bo‘lsa teg ko‘rsatilmaydi.

Misol

elementini faqat showDiv xususiyati "true"ga o‘rnatilgan bo‘lsa ko‘rsating.

<div id="app">
  <div v-show="showDiv">This div tag can be hidden</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        showDiv: true
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

v-show va v-if

v-show va v-if o‘rtasidagi farq shundaki, v-if shartga qarab elementni yaratadi (ko‘rsatadi), lekin v-show bilan element allaqachon yaratilgan, v-show faqat uning ko‘rinishini o‘zgartiradi.

Shuning uchun, obyektning ko‘rinishini almashtirishda v-show dan foydalanish yaxshiroqdir, chunki brauzer uchun buni qilish osonroq va bu tezroq javob va yaxshi foydalanuvchi tajribasiga olib kelishi mumkin.

v-show o‘rniga v-if ishlatishning sababi shundaki, v-if’ni v-else-if va v-else bilan birga ishlatish mumkin.

Quyidagi misolda v-show va v-if ikki xil

elementida alohida ishlatiladi, lekin bir xil Vue xususiyatiga asoslangan. v-show
elementini saqlab qolishi va faqat CSS ko‘rsatish xususiyatini “yo‘q” ga o‘rnatishi uchun misolni ochib, kodni tekshirishingiz mumkin, lekin v-if aslida
elementini yo‘q qiladi.

Misol

Ikki

elementini faqat showDiv xususiyati "true"ga o‘rnatilgan bo‘lsa ko‘rsating. Agar showDiv xususiyati "noto‘g‘ri" ga o‘rnatilgan bo‘lsa va biz brauzer yordamida misol sahifasini tekshirsak, v-if bo‘lgan
elementi yo‘q qilinganligini ko‘rishimiz mumkin, lekin v-showli
elementida shunchaki CSS ko‘rsatish xususiyati "yo‘q" ga o‘rnatilgan.

<div id="app">
  <div v-show="showDiv">Div tag with v-show</div>
  <div v-if="showDiv">Div tag with v-if</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        showDiv: true
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Vue mashqlari

O‘zingizni mashqlar bilan sinab ko‘ring

Mashq:

Vue "lightOn" mantiqiy ma’lumotlar xususiyatiga qarab quyidagi

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

<div id="app">
  <div id="lightDiv">
    <div ="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Switch light</button>
</div>

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

Mashqni boshlash


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish