Vue.js: What is the difference between v-if and v-show?

v-if — conditional rendering (adds/removes from DOM). v-show — conditional display (toggles CSS display).

v-if:

• Adds/removes element from DOM.
• Lazy rendering.
• Better for rarely changing conditions.

v-show:

• Toggles CSS display property.
• Always renders in DOM.
• Better for frequent toggles.

1<div v-if="show">Content v-if</div>
2<div v-show="show">Content v-show</div>

Key differences:

• v-if — DOM manipulation, higher toggle cost.
• v-show — CSS toggle, lower toggle cost.