Sobes.tech
Junior

Indica le differenze tra le direttive v-show e v-if.

sobes.tech AI

Risposta dell'AI

v-if rende condizionalmente un elemento, rimuovendolo completamente dal DOM se la condizione è falsa. v-show rende sempre l'elemento, ma alterna la sua proprietà CSS display tra none e il valore originale a seconda della condizione.

Differenze in termini di prestazioni / utilizzo:

  • v-if: Rendering iniziale più pesante, ma migliori prestazioni in caso di cambiamenti rari, poiché gli elementi vengono completamente rimossi dal DOM.
  • v-show: Rendering iniziale più leggero, ma più adatto per elementi che cambiano frequentemente, poiché cambia solo la proprietà CSS.

Esempio di utilizzo:

<!-- Uso di v-if -->
<template>
  <div v-if="isVisible">
    Questo blocco è visibile solo se isVisible è vero
  </div>

  <!-- Uso di v-show -->
  <div v-show="isVisible">
    Questo blocco è sempre nel DOM, ma visibile solo se isVisible è vero
  </div>
</template>

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