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

v-if — conditional rendering. v-show — conditional display.

v-if:

• Conditionally renders element.
• Adds/removes from DOM.
• Higher initial render cost.
• Better for rarely changing conditions.

1<div v-if="isVisible">Content</div>

v-show:

• Always renders element.
• Toggles CSS display.
• Higher initial render cost.
• Better for frequently toggling.

1<div v-show="isVisible">Content</div>

Key differences:

• v-if — adds/removes from DOM.
• v-show — toggles CSS.
• v-if — better for rare toggles.
• v-show — better for frequent toggles.