Oboje uvjetno prikazuju element, ali to rade na različit način — v-if dodaje/uklanja element iz DOM-a; v-show ga drži u DOM-u i prebacuje njegovu 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 ima viši trošak prebacivanja (kreira/briše elemente i njihove komponente, pokreće hook životnog ciklusa svaki put) ali nula troška kada je uvjet false (ništa se ne prikazuje).v-show ima viši početni trošak (uvijek se prikazuje, čak i ako je skriveno) ali jeftino prebacivanje (samo CSS promjena).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 podržava v-else-if/v-else lance; v-show ne (samo prebacuje jedan element).
v-show ne radi na <template> omotačima (nema elementa za postavljanje display na); v-if radi.
Odabir ispravne je prava odluka o performansama: v-show za stvari koja se često prebacuju (DOM ostaje, prebacivanje je jeftino), v-if za stvari koja su uvjetne/rijetke ili skupe (ne prikazuj ih dok nisu potrebne).
Pogrešan odabir — npr. v-show na teškom sadržaju koji je obično skriven — gubi rad renderiranja.