Sobes.tech
Junior

Navedite razlike između direktiva v-show i v-if.

sobes.tech АИ

Одговор од АИ

v-if uslovno prikazuje element, potpuno ga uklanjajući iz DOM-a ako je uslov netačan. v-show uvek prikazuje element, ali prebacuje njegov CSS svojstvo display između none i početne vrednosti u zavisnosti od uslova.

Razlike u performansama / korišćenju:

  • v-if: Teži početni rendering, ali bolji performans kod retkih prebacivanja, jer se elementi potpuno uklanjaju iz DOM-a.
  • v-show: Lakši početni rendering, ali je bolji za elemente koji se često prebacuju, jer menja samo CSS svojstvo.

Primer upotrebe:

<!-- Korišćenje v-if -->
<template>
  <div v-if="isVisible">
    Ovaj blok je vidljiv samo ako je isVisible tačno
  </div>

  <!-- Korišćenje v-show -->
  <div v-show="isVisible">
    Ovaj blok je uvek u DOM-u, ali je vidljiv samo ako je isVisible tačno
  </div>
</template>

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