Oba pogojno prikazujeta element, vendar to počneta drugače — v-if doda/odstrani element iz DOM-a; v-show ga obdrži v DOM-u in preklopi njegov 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šjo stroškost preklopa (ustvari/uniči elemente in njihove komponente, v vsakem koraku izvede lifecycle hooke), vendar nič stroškov, ko je pogoj false (nič se ne naredi).v-show ima višjo začetno stroškost (vedno se naredi, tudi če je skrito), vendar poceni preklope (samo CSS sprememba).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 podpira v-else-if/v-else verige; v-show ne (preklaplja samo en element).
v-show ne deluje na <template> ovojih (ni elementa, na katerem bi nastavili display); v-if pa deluje.
Izbira prave je prava odločitev glede zmogljivosti: v-show za stvari, ki se pogosto preklapljajo (DOM ostane, preklapljanje je poceni), v-if za stvari, ki so pogojne/redke ali drago (jih ne naredi, dokler niso potrebne).
Napačna izbira — npr. v-show na težki vsebini, ki je praviloma skrita — zapravi delo pri risanju.