Sobes.tech
Junior

Nurodykite skirtumus tarp v-show ir v-if direktyvų.

sobes.tech AI

Atsakymas iš AI

v-if sąlygiškai atvaizduoja elementą ir visiškai jį pašalina iš DOM, jei sąlyga yra klaidinga. v-show visada atvaizduoja elementą, bet keičia jo CSS savybę display tarp none ir pradinės reikšmės priklausomai nuo sąlygos.

Skirtumai našumo / naudojimo:

  • v-if: Sunkesnis pradinis atvaizdavimas, bet geresnis našumas retai perjungiant, nes elementai visiškai pašalinami iš DOM.
  • v-show: Lengvesnis pradinis atvaizdavimas, bet geriau naudoti dažnai perjungiamus elementus, nes tai tik CSS savybės keitimas.

Naudojimo pavyzdys:

<!-- v-if naudojimas -->
<template>
  <div v-if="isVisible">
    Šis blokas matomas tik jei isVisible yra teisinga
  </div>

  <!-- v-show naudojimas -->
  <div v-show="isVisible">
    Šis blokas visada DOM, bet matomas tik jei isVisible yra teisinga
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>