v-if adds and removes the element from the DOM, while v-show always renders it and only toggles its CSS display property. Use v-show when something toggles often, and v-if when the condition rarely changes.
v-ifis real conditional rendering. It is lazy, so if the condition starts false, Vue renders nothing. Each toggle destroys and recreates the element, its event listeners and its child components, which gives it a higher toggle cost.v-showrenders the element once, whatever the condition, and keeps it in the DOM. That gives it a higher initial render cost but cheap toggles.
v-show does not work on a <template> element or with v-else, while v-if supports both.
<div v-if="isVisible">Rendered conditionally</div>
<div v-show="isVisible">Always in DOM, visibility toggled</div>
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓
Tailored explanation · switch back to · ·
What should the new diagram focus on?