Begge viser betinget et element, men de gør det på forskellige måder — v-if tilføjer/fjerner elementet fra DOM; v-show holder det i DOM og skifter dets CSS display.
<template>
<p v-if="isVisible">Rendered only when true (removed from DOM when false)</p>
<p v-show="isVisible">Always in the DOM; just display:none when false</p>
</template>
<!-- v-if="false" → the element doesn't exist at all -->
<!-- (nothing in the DOM) -->
<!-- v-show="false" → the element exists but is hidden -->
<p style="display: none">...</p>
v-if har højere omskiftningsomkostninger (det opretter/ødelægger elementer og deres komponenter, kører livscyklushooks hver gang) men nul omkostninger når betingelsen er falsk (intet gengivet).v-show har højere initiale omkostninger (gengives altid, selvom det er skjult) men billigt omskiftning (bare en CSS-ændring).Toggles often (tabs, dropdowns) → v-show (cheap to flip)
Rarely changes / may never render → v-if (skip rendering entirely)
Expensive content rarely shown → v-if (don't pay to build it)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if understøtter v-else-if/v-else kæder; v-show gør det ikke (det skifter kun ét element).
v-show fungerer ikke på <template>-omslag (der er intet element at sætte display på); v-if gør.
At vælge det rigtige er en rigtig ydeelsebeslutning: v-show for ting der skiftes ofte (DOM bliver, skiftning er billig), v-if for ting der er betingede/sjældne eller dyre (gengiv dem ikke før de er nødvendige).
At vælge forkert — f.eks. v-show på tungt indhold der normalt er skjult — spilder gengiveelsesarbejde.