It is a common requirement for web applications to hide or show certain elements based on some condition. Vue 3 Conditional Rendering helps achieve the same in a typical Vue application.
Conditional Rendering in Vue makes it possible to toggle the present of any DOM element. To facilitate this feature, VueJS provides several directives such as v-if, v-else and v-show. However, the directives have subtle differences that should be taken into consideration.
1 – Vue 3 Conditional Rendering using v-if Directive
The first directive for conditional rendering in Vue 3 is v-if. See below example:
<button @click="showMessage = !showMessage">Toggle Message</button>
<h1 v-if="showMessage">Vue Conditional Rendering Works!</h1>The h1 element renders only if the value of showMessage is truthy. The variable showMessage is bound to the element using v-if directive.
Important point is that these directives work similarly in both Vue 3 Options API and Composition API.
2 – Use of v-else Directive
The v-else directive provides an else block for a corresponding v-if.
See below snippet.
<button @click="showMessage = !showMessage">Toggle Message</button>
<h1 v-if="showMessage">Vue Conditional Rendering Works!</h1>
<h2 v-else>Click Button</h2>Basically, if showMessage is false, VueJS will render the v-else block. You can use v-else to render some informational message for the user in case some data is missing.
3 – Vue 3 v-else-if Directive
This is another variation of v-if and v-else directive. It allows you to write multiple conditional statements.
Check out the below example:
<button @click="answer = 'YES'">Choose YES</button>
<button @click="answer = 'NO'">Choose NO</button>
<div v-if="answer === 'YES'">Yes</div>
<div v-else-if="answer === 'NO'">No</div>
<div v-else>No Answer!</div>As you can see, we also have an else-if condition here. In fact, we can even chain multiple else-if conditions if needed.
4 – Vue 3 v-show Usage
The v-show directive is an alternative option to v-if for conditional rendering in VueJS. From a usage perspective, v-show is quite similar to v-if.
See below example:
<button @click="showMessage = !showMessage">Toggle Message</button>
<h1 v-if="showMessage">Vue Conditional Rendering Works!</h1>
<h2 v-else>Click Button</h2>
<h1 v-show="showMessage">Vue Conditional Rendering Works!</h1>The v-show directive can also use the same variable and render an element conditionally. However, we cannot use else-if and else with v-show.
5 -Difference between v-if and v-show in VueJS
On face value, v-if and v-show look similar. However, internally there is a major difference between the two directives.
The v-if conditional rendering is real. In other words, v-if makes sure that the element and its child elements are completely removed from the DOM in case of false expression. In fact, even the event handlers attached to the element is destroyed completely.
Also, v-if follows a lazy approach. If the condition is false on initial render, it will not take any action. Only when the condition becomes true, it will render the conditional block.
Due to this nature, v-if has a high cost for toggling an element because VueJS has to do more work for every switch.
On the other hand, v-show is a simpler alternative. It simply hides the block by using CSS display property. The block is still part of the DOM. The v-show simply changes its visibility. Basically, v-show has high-cost for initial rendering but very low cost for toggling.
Basically, we should use v-if for cases where toggling is a rare activity. For frequent toggles, v-show is much better.
6 – Can we use v-for and v-if together?
No, we should avoid using v-for and v-if together on the same block.
When both directives are present on a block, v-if gets precedence. In other words, v-if will be processed first. This can lead to unintended consequences because v-if will not have access to variables from the scope of v-for.
See below example:
<li v-for="item in items" v-if="!item.isAvailable">
{{ item.name }}
</li>The v-if directive evaluates a property of the item object that will not be available.
To avoid this issue, we should move v-for to higher-level template.
<template v-for="item in items">
<li v-if="!item.isAvailable">
{{ item.name }}
</li>
</templateThis will ensure that v-if will have access to the item.
You can read more about v-for directive in this detailed post on list rendering in Vue 3.
Conclusion
We have covered various directives that support conditional rendering in VueJS. Also, we went through a couple of important considerations while choosing between v-if and v-show and using v-if with v-for directive.
You can play around with some example code on Vue 3 conditional rendering on Stackblitz.
If you have any comments or queries about this post, please feel free to mention them in the comments section below.
0 Comments