Back
VueEasyNew

What's the difference between `v-if` and `v-show`?

DOM presence vs CSS display

Ideal Answer

  • v-if: Conditionally renders an element — if false, the element (and its component, if any) is not rendered in the DOM at all, and is fully destroyed/recreated when toggled. Higher toggle cost, but zero cost when initially false.
  • v-show: Always renders the element in the DOM, and toggles its display: none CSS property. Lower toggle cost (no destroy/recreate), but higher initial render cost since it's always rendered.

Rule of thumb: use v-show for elements that toggle frequently, and v-if for elements that rarely change or have a high initial render cost when the condition is false.