Noem de verschillen tussen de directives v-show en v-if.

v-if rendert een element conditioneel en verwijdert het volledig uit de DOM als de voorwaarde onwaar is. v-show rendert altijd het element, maar schakelt de CSS-eigenschap display tussen none en de oorspronkelijke waarde afhankelijk van de voorwaarde.

Verschillen in prestaties / gebruik:

• v-if: Zwaardere initiële rendering, maar betere prestaties bij zeldzame schakelingen, omdat elementen volledig uit de DOM worden verwijderd.
• v-show: Lichtere initiële rendering, maar beter voor elementen die vaak worden geschakeld, omdat alleen de CSS-eigenschap wordt gewijzigd.

Voorbeeld van gebruik:

<!-- Gebruik van v-if -->
<template>
  <div v-if="isVisible">
    Dit blok is alleen zichtbaar als isVisible waar is
  </div>

  <!-- Gebruik van v-show -->
  <div v-show="isVisible">
    Dit blok is altijd in de DOM, maar alleen zichtbaar als isVisible waar is
  </div>
</template>

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