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 property).

v-if:

• Adds/removes element from DOM entirely.
• Lazy rendering (not created until condition is true).
• Higher toggle cost, lower initial cost.
• Better for rarely changing conditions.

v-show:

• Always renders element in DOM.
• Toggles CSS display property.
• Higher initial cost, lower toggle cost.
• Better for frequently toggling conditions.

1<template>
2  <!-- v-if: element added/removed from DOM -->
3  <div v-if="isVisible">Content with v-if</div>
4
5  <!-- v-show: element always in DOM, CSS toggled -->
6  <div v-show="isVisible">Content with v-show</div>
7</template>

Performance considerations:

• v-if — lower memory usage when hidden, more expensive to toggle.
• v-show — higher memory usage, cheaper to toggle frequently.
• Use v-if for conditions that rarely change.
• Use v-show for conditions that toggle often.