• *Wellcome Guest This Forum is created to help each other. Join us in our journey.

    * Guest Earn Piont Every Post, like, comment,and etc.

Vue.js Conditional Rendering

S

Shehroz Azam

Guest
Vue.js is an easy to learn and approachable library that we can start building web applications in it with the basic knowledge of web development. In Vue.js, developers love to code and feel freedom while developing applications.

In any dynamic web application, conditional rendering is a necessary part. Vue.js provides different ways for conditional rendering, and we can use any of the following ways which suit our purpose:

  • v-show
  • v-if
  • v-else

In this article, we will try these directives provided by Vue.js for conditional rendering and understand them in a better way.

v-show


The v-show only hides the element by disabling its visibility. It hides the element if the value of the passed expression or variable is not truthy.

For example:

<p v-show="isBool">This paragraph is not hidden</p>
<p v-show="!isBool">This paragraph is hidden</p>
v-if


On the other hand, v-if does not hide the element, but it also does not render anything until the value of the passed expression or variable becomes true.

For Example:

<!-- This div is conditionally rendering -->
<div v-if="isBool">
<p>This is a paragraph</p>
</div>

There is an additional feature in the v-if directive as compared to the v-show directive. We can apply it to the template block as well if we do not want to render anything in between that block. Either there is a child component in that or a lot of other elements.

For example:

<!-- This template is conditionally rendering -->
<template v-if="isBool">
<h1>This is a Heading</h1>
<p>This is a paragraph</p>

<!-- A child component -->
<Hello msg="Hello Vue" />
</template>
v-else


We can also use the v-else directive along with the v-if statement in order to conditionally render between any of the two blocks. But, keeping in mind that the v-else block must have to appear right after the v-if block.

For example:

<p v-if="isVar == true">This paragraph will render if 'isVar' becomes true</p>
<p v-else>Else, this paragraph will get rendered.</p>

We can apply v-else on the template block as well.

<!-- This div is conditionally rendering -->
<div v-if="isVar == true">
<h1>This is a Heading</h1>
</div>
<!-- v-else on template block -->
<template v-else>
<p>This is a paragraph</p>

<!-- A child component -->
<Hello msg="Hello Vue" />
</template>
v-else-if


Just like v-else, we can also use the v-else-if directive along with the v-if directive.

For example:

<div v-if="type == 'car'">
<p>Car</p>
</div>
<div v-else-if="type == 'book'">
<p>Book</p>
</div>
<div v-else-if="type == 'animal'">
<p>Animal</p>
</div>
<div v-else>
<p>None of the ablove</p>
</div>
v-if vs. v-show


The v-if and v-show kind of do the same task. They both hide the elements in the DOM based on the truthy or falsy value of the passed expression, but with a subtle difference of hiding and not rendering elements.

If we compare the time and processing cost between these two. The v-if costs more during runtime or toggling, while v-show costs more at the start of rendering. So, it would be wise to use v-show when toggling is purpose. Otherwise, v-if is preferred.

Wrapping up


In this article, we have learned how to conditionally render the DOM in Vue.js using v-if and v-else directives. We have shown some examples and learned about the real difference between v-show and v-if directive. If this article helps you to have a better understanding and concepts, keep on visiting linuxhint.com for such useful content.

Credit to linux
 

Latest posts

Latest threads

Top