Conditional Rendering in Vue: v-show
The v-show directive disables the visibility of the element and hides it. If the value of the passed variable or expression is false, it hides the element, else displays it. Let us see an example,
Code:
<template>
<div>
<!-- Displayed as the condition is fullfilled-->
<h1 v-show = trueCondition>Hello! I am vissible</h1>
<h1 v-show = falseCondition>I am not vissible</h1>
</div>
</template>
<script>
export default {
data() {
return {
trueCondition: true,
falseCondition: false,
};
},
};
</script>
Output
Conditional Rendering in Vue: v-if
The v-if directive does not hide the element. However, it does not render anything until the value of the passed expression or variable becomes true. For example,
Code:
<template>
<div>
<!-- Displayed as the condition is fullfilled-->
<h1 v-if = trueCondition>Hello! I am vissible</h1>
<h1 v-if = falseCondition>I am not vissible</h1>
</div>
</template>
<script>
export default {
data() {
return {
trueCondition: true,
falseCondition: false,
};
},
};
</script>
Output
The v-if directive ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
Also, if the condition is false on the initial render, it will not do anything, and the conditional block won't be rendered until the condition becomes true for the first time. It also has higher toggle costs.
Conditional Rendering in Vue: v-else
We can also use the v-else directive and the v-if statement to distinguish between any two blocks conditionally. But, keep in mind that the v-else block must appear right after the v-if block. It is used to render a block that does not fulfill the condition of the v-if directive.
Code:
<template>
<div>
<h1 v-if = condition> I am not visible.</h1>
<!-- Displayed as the above condition is not fullfilled-->
<h1 v-else> I am visible.</h1>
</div>
</template>
<script>
export default {
data() {
return {
condition: false,
};
},
};
</script>
Output
Note: The v-else directive can also be used along with templates.
Conditional Rendering in Vue: v-else-if
Like the v-else directive, we can also use the v-else-if directive with the v-if directive. If the v-if condition is not fulfilled, the v-else-if condition is checked. For example,
Code:
<div>
<h1 v-if = "1 === 0">1 === 0</h1>
<!-- Displayed as the above condition is not fullfilled and the following condition is true-->
<h1 v-else-if = "1 !== 0">1 !== 0</h1>
</div>
Output
Frequently Asked Questions
1. What is the difference between v-show and v-if?
Ans:- An element with the v-show directive will always be rendered and remain in the DOM. This is done by toggling the display CSS property of the element.
In the case of the v-if directive, the element is completely removed from DOM.
2. How to hide more than one element?
Ans:- To toggle more than one element, we can use v-if on the <template> element, an invisible wrapper.
3. Why isn't it recommended to use v-for along with v-if?
Ans:- It isn't recommended to use v-for along with v-if as v-for has higher priority than v-if when they're used together. And Vue has to check each element for v-if's condition in every iteration.
4. What are the use cases of conditional rendering in Vue?
Ans:- Some of the use cases of conditional rendering in Vue are as follows:-
- Toggling between the application
- Show or hide blocks
- Implement access permissions
5. When should we use v-show and v-if?
Ans:- The v-if directive has a higher toggle cost, while the v-show directive has a higher initial render cost. Hence, one should prefer the v-show directive if we need to toggle something often and prefer the v-if directive if the condition is unlikely to change at runtime.
Key Takeaways
This blog covered the basic concepts of Conditional Rendering in Vue in detail and various examples and frequently asked questions. We learned how to render the DOM in Vue.js using directives conditionally.
Don't stop here. Check out our Learn Vue free course to learn Vue from scratch. Also, feel free to check out the blog Vue JS Vs. React in 2021.
We hope you found this blog useful. Liked the blog? Then feel free to upvote and share it.
34+ registered 
