Direktivet v-show i Vue

Et annet alternativ for betinget visning er direktivet v-show. Det brukes veldig likt:

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

Forskjellen er at elementet med v-show alltid vil bli rendret og forbli i DOM, og bare CSS-egenskapen display vil bli skrudd av og på.

Direktivet v-if utfører "ekte" betinget rendering, ettersom det garanterer at hendelseslyttere og underkomponenter innenfor blokken blir ødelagt og gjenopprettet på riktig måte ved veksling av betingelsen.

Direktivet v-if er også lat: hvis betingelsen er usann ved den første renderingen, vil den ikke gjøre noe - den betingede blokken vil ikke bli rendret før betingelsen blir sann.

Til sammenligning er v-show mye enklere - elementet rendres alltid, uavhengig av utgangstilstanden, med veksling basert på CSS.

Generelt har v-if høyere vekslingskostnader, mens v-show har høyere kostnader ved første rendering. Så bruk v-show hvis vekslinger vil være hyppige, og foretrekk v-if hvis betingelsen kanskje ikke endres under kjøring.