Vue 6: Conditional Rendering: v-if vs v-show
easy⏱ 5 mincoursevue
v-if removes, v-show hides
v-if removes the element (and any component inside it) from the DOM entirely when its condition is false — it's genuinely not there. v-show always renders the element and just toggles display: none via CSS, so the element and its state stay alive underneath.
<!-- v-if: element doesn't exist in the DOM at all when false -->
<p v-if="isVisible">Now you see me</p>
<!-- v-show: element always exists, display:none when false -->
<p v-show="isVisible">Now you see me (via CSS)</p>
v-else-if / v-else chains
Just like a JS if / else if / else, each v-else-if or v-else branch must sit on an element immediately adjacent to the previous v-if/v-else-if in the template — Vue only evaluates the first branch whose condition matches.
<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 70">Grade: B</p>
<p v-else>Grade: C or below</p>
When to use which
Use v-show for things toggled often or rapidly (tabs, tooltips), since it avoids DOM churn. Use v-if for things rarely shown, expensive to render, or that shouldn't exist at all until a condition is met — it truly skips creation instead of just hiding it.
Build the toggling panels
Create showIf, showShow, and score refs. Toggle a panel with v-if, another with v-show, and show a grade using v-if / v-else-if / v-else based on score.