Direktivet v-show i Vue

En anden mulighed for betinget visning er direktivet v-show. Det bruges på en meget lignende måde:

html<template>
  <p v-show="isAuth">
    +++
  </p>
</template>

Forskellen er, at elementet med v-show altid vil blive gengivet og forblive i DOM'en, og kun dens CSS-egenskab display vil blive skiftet.

Direktivet v-if udfører en "ægte" betinget gengivelse, da det garanterer, at event-lyttere og underkomponenter inde i blokken bliver ødelagt og genskabt korrekt, når betingelsen skifter.

Direktivet v-if er også doven: hvis betingelsen er falsk på tidspunktet for den indledende gengivelse, vil den ikke gøre noget - den betingede blok vil ikke blive gengivet, før betingelsen bliver sand.

Som en sammenligning er v-show meget enklere - elementet bliver altid gengivet, uanset starttilstanden, med skift baseret på CSS.

Generelt har v-if højere omkostninger ved skift, mens v-show har højere omkostninger ved den indledende gengivelse. Så brug v-show, hvis skiftene vil være hyppige, og foretræk v-if, hvis betingelsen måske ikke ændrer sig under kørslen.