3 min read
•Question 21 of 37easyWhat is the difference between v-if and v-show?
Conditional rendering strategies.
What You'll Learn
- v-if behavior
- v-show behavior
- When to use each
v-if
Conditionally renders element. Removes from DOM when false.
code.txtVUE
<template>
<div v-if="isVisible">
This is removed from DOM when false
</div>
</template>v-show
Always renders, toggles display CSS property.
code.txtVUE
<template>
<div v-show="isVisible">
This stays in DOM, just hidden
</div>
</template>Comparison
| Feature | v-if | v-show |
|---|---|---|
| DOM | Adds/removes | Always present |
| Initial cost | Lower | Higher |
| Toggle cost | Higher | Lower |
| With v-else | Yes | No |
| Lazy | Yes | No |
When to Use
code.txtVUE
<!-- v-if: Rarely toggled, heavy content -->
<HeavyComponent v-if="showOnce" />
<!-- v-show: Frequently toggled -->
<Dropdown v-show="isOpen" />