Conditional Rendering in Vue.js
From the Vue.js cheat sheet · Directives · verified Jul 2026
Conditional Rendering
v-if, v-else, v-show directives
vue
<!-- v-if/v-else (Vue 2 & 3) -->
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Not A or B</div>
<!-- v-show (Vue 2 & 3) -->
<div v-show="isVisible">Always in DOM</div>
<!-- Template v-if (Vue 2 & 3) -->
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph</p>
</template>💡 v-if removes/adds elements to DOM, v-show toggles CSS display
⚡ Use v-show for frequent toggling, v-if for rare changes
📌 In Vue 3, v-if has higher priority than v-for (opposite of Vue 2)
🔥 template tag renders no wrapper element, useful for grouping
Continue with Vue.js
Save the full cheat sheet or work through every related task.