How to use v-else and v-else-if in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating complex conditional rendering logic is essential for building dynamic Vue applications with multiple display states.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented sophisticated conditional rendering in Vue components over 25 years of development.
From my expertise, the most elegant approach is to use v-else-if and v-else directives chained with v-if to create clear conditional logic.
This pattern provides readable template code and efficient rendering performance.
Chain v-if, v-else-if, and v-else directives to create conditional rendering sequences.
<div v-if="status === 'loading'">Loading...</div>
<div v-else-if="status === 'error'">Error occurred</div>
<div v-else>Data loaded successfully</div>
Here the template renders different content based on the status value. Vue evaluates the conditions in order: first checking if status equals ’loading’, then ’error’, and finally rendering the else block for any other value. Only one element will be rendered at a time, and Vue efficiently updates the DOM when the status changes.
Best Practice Note:
This is the same conditional rendering pattern we use in CoreUI Vue components for state-dependent UI logic. Always place these directives on adjacent sibling elements and ensure the conditional chain covers all possible states to prevent unexpected rendering behavior.
