Begge viser et element betinget, men de gjør det på forskjellige måter — v-if legger til/fjerner elementet fra DOM; v-show holder det i DOM og veksler 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øyere vekslinga-kostnad (det oppretter/sletter elementer og deres komponenter, kjører lifecycle hooks hver gang), men null kostnad når betingelsen er false (ingenting gjengitt).v-show har høyere initial-kostnad (gjengir alltid, selv om skjult), men billig veksling (bare en CSS-endring).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 støtter v-else-if/v-else-kjeder; v-show gjør ikke det (det veksler bare ett element).
v-show fungerer ikke på <template>-wrappere (det er ingen element å sette display på); v-if gjør det.
Å velge riktig er en reell ytelsesbeslutning: v-show for ting som veksles ofte (DOM forblir, veksling er billig), v-if for ting som er betingede/sjeldne eller dyre (ikke gjengir dem før det er nødvendig).
Å velge feil — f.eks. v-show på tungt innhold som er vanligvis skjult — sløser rendreingsarbeid.