v-show

Misol

"showDiv" qiymatiga qarab <div> elementini shartli ravishda ko‘rsatish yoki yashirish uchun v-show direktivasidan foydalanish.

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

O‘zingiz sinab ko‘ring »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

v-show direktivasi elementni shartli ravishda ko‘rsatish yoki yashirish uchun ishlatiladi.

v-show ishlatadigan ifoda "false" qiymatini berganda CSS display xususiyati "none" ga o‘rnatiladi, aks holda CSS display xususiyati standart qiymatiga qaytadi.

v-show’ga ega element bir marta mount qilinadi (DOMga o‘rnatiladi) va DOMda qoladi, v-show bilan faqat uning ko‘rinishi almashtiriladi.

v-show o‘rnatilgan <Transition> komponenti bilan ishlatilganda transition class’lari va hodisalarini ishga tushiradi.

Obyektning ko‘rinishi v-show yordamida almashtirilganda mounted/unmounted yoki activated/deactivated kabi lifecycle hook’lari ishga tushmaydi.

v-show va v-if

v-show va v-if direktivalari bir qarashda ancha o‘xshash, chunki ikkalasi ham elementni ko‘rsatish yoki ko‘rsatmaslik uchun almashtira oladi, ammo ular o‘rtasida ba’zi farqlar bor:

	v-show	v-if
Element almashtirilganda uni DOMda yaratadi va yo‘q qiladimi?	yo‘q	ha
Element almashtirilganda mounted/unmounted lifecycle hook’larini ishga tushiradimi?	yo‘q	ha
O‘rnatilgan `<Transition>` komponenti bilan ishlatilganda chiqish va kirish uchun transition hodisalari va class’larini ishga tushiradimi?	ha	ha
O‘rnatilgan `<template>` elementi bilan ishlaydimi?	yo‘q	ha
v-else-if va v-else bilan ishlaydimi?	yo‘q	ha

Ko‘proq misollar

Misol

<div> elementini shartli ravishda ko‘rsatish yoki yashirish uchun v-show va v-if direktivalari yonma-yon ishlatiladi.

Misolni oching, shartni "false" ga o‘rnating, so‘ng sichqonchaning o‘ng tugmasini bosib, sahifani tekshiring (inspect) — v-show’ga ega element DOMda hali ham mavjudligini ko‘rasiz.

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

Misol

<p> elementi v-show bilan ko‘rinadi va after-enter hodisasini ishga tushiradi.

<template>
  <h1>JavaScript Transition Hooks</h1>
  <p>This code hooks into "after-enter" so that after the initial animation is done, a method runs that displays a red div.</p>
  <button @click="pVisible=true">Create p-tag!</button><br>
  <Transition @after-enter="onAfterEnter">
    <p v-show="pVisible" id="p1">Hello World!</p>
  </Transition>
  <br>
  <div v-show="divVisible">This appears after the "enter-active" phase of the transition.</div>
</template>

<script>
export default {
  data() {
    return {
      pVisible: false,
      divVisible: false
    }
  },
  methods: {
    onAfterEnter() {
      this.divVisible = true;
    }
  }
}
</script>

<style scoped>
  .v-enter-active {
    animation: swirlAdded 1s;
  }
  @keyframes swirlAdded {
    from {
      opacity: 0;
      rotate: 0;
      scale: 0.1;
    }
    to {
      opacity: 1;
      rotate: 360deg;
      scale: 1;
    }
  }
  #p1, div {
    display: inline-block;
    padding: 10px;
    border: dashed black 1px;
  }
  #p1 {
    background-color: lightgreen;
  }
  div {
    background-color: lightcoral;
  }
</style>

Misolni ishga tushirish »

Tegishli sahifalar

Vue qo‘llanmasi: Vue v-show direktivasi

Vue darsligi: Vue v-if direktivasi

Vue darsligi: Vue animatsiyalari

Vue ma’lumotnomasi: Vue komponenti elementi

Vue ma’lumotnomasi: Vue v-if direktivasi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish