Both conditionally display an element, but they do it differently — v-if adds/removes the element from the DOM; v-show keeps it in the DOM and toggles its 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 has higher toggle cost (it creates/destroys elements and their components, runs lifecycle hooks each time) but zero cost when the condition is false (nothing rendered).v-show has higher initial cost (always renders, even if hidden) but cheap toggling (just a CSS change).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 supports v-else-if/v-else chains; v-show does not (it only toggles one element).
v-show doesn't work on <template> wrappers (there's no element to set display on); v-if does.
Choosing the right one is a real performance decision: v-show for things toggled frequently (the DOM stays, flipping is cheap), v-if for things that are conditional/rare or expensive (don't render them until needed).
Picking wrong — e.g. v-show on heavy content that's usually hidden — wastes rendering work.