Abu abi sąlygiškai rodo elementą, tačiau tai daro skirtingai — v-if prideda/pašalina elementą iš DOM; v-show pasilaiko jį DOM ir perjungia jo 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 turi didesnę perjungimo kainą (kuria/sunaikina elementus ir jų komponentus, vykdo gyvenimo ciklo hook'us kiekvieną kartą), tačiau nulinę kainą, kai sąlyga yra false (nieks nerendeaguojamas).v-show turi didesnę pradinę kainą (visada rendeaguojama, net jei paslėpta), tačiau pigesnis perjungimas (tik CSS pokytis).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 palaiko v-else-if/v-else grandines; v-show to nedaro (jis tik perjungia vieną elementą).
v-show neveikia <template> gaubyklėse (nėra elemento, kuriame nustatyti display); v-if veikia.
Tinkamo pasirinkimo pagalba yra reali našumo sprendimas: v-show dažnai perjungiamiems dalykams (DOM lieka, perjungimas pigu), v-if sąlyginiam/retam arba brangiam turinys (nerendeaguojama, kol to nereikia).
Bloga pasirinkimas — pvz. v-show sunkiam turinaiui, kuris paprastai yra paslėptas — sugadina renderavimo darbą.