7. Conditional rendering Part 1 (v-if, v-else, v-else-if)

We don’t always want to render everything to our webpage. Based on a certain condition or the value of a particular expression, we might want to hide/show/attach or detach elements. This is nothing but conditional rendering – render elements based on a condition. This can be achieved using simple if-else statements. But, how are we going to do it with Vue? Let’s remedy that right here and right now!

Vue directives come to our rescue one more time! We have v-if, v-else and v-else-if to help us in this regard. Let’s see one by one with examples, for a solid understanding. I will sprinkle a lot of visuals to ease the process.

To start with, let us have two paragraph tags with some text,

1. The v-if directive

The syntax for using v-if directive is as follows,

<HTML-tag v-if=”condition or expression that evaluates to true or false”>

If the condition is truthy/evaluates to true, the tag will be rendered.

Let us add a display property to the Vue instance’s data object and give it a value of false.

data: {
    message: "Hi",
    display: false
  }

Now add the v-if directive to the first paragraph tag and specify the display condition based on which the tag will either be rendered or not.

<p v-if="display">Display evaluates to true</p>

Since the value of display is now set to false, the first <p> tag with the text, “Display evaluates to true”, will not be rendered.

Changing the display value to true will render the first <p> tag’s content.

2. The v-else directive

Let’s say you want to display the first <p> tag when the display is true and the second <p> tag when the display evaluates to false. In such cases, we can use v-else directive. It is similar to an else block.

<p v-if="display">Display evaluates to true</p>
<p v-else>You always get to see me :)</p>

With display as true, first <p> tag will be rendered as the v-if directive’s condition evaluates to true.

Changing the display to false will only render the second <p> tag with the v-else directive as shown below,

Sticky note: The HTML element with v-else directive must immediately follow an element with v-if. Otherwise the v-else element will not be recognized. In other words, don’t dare to add any elements between a v-if element and a v-else element.

These directives can be added to a single HTML element or a block of elements with the help of <div>, <template> etc. Consider a scenario where you want to display an error message based on a condition. if-else blocks come handy in such situations.

3. The v-else-if directive

This is also used along with a v-if element. This directive acts as an “else-if” condition. It can be chained a number of times as in any other programming language.

Let’s add a val property to the data object and give it a numerical value.

data: {
    message: "Hi",
    val: 5
  }

Add v-if, v-else-if and v-else directives to three <p> tags and add conditions.

<p v-if="val < 10">Val is less than 10</p>
<p v-else-if="val > 10 && val < 20">val is between 10 and 20</p>
<p v-else>Pretty high val!!</p>

Now let us change the val property’s value and see how the output changes.

First, let the val be 5. Since it is less than 10, v-if condition evaluates to true and it gets rendered.

Now change the val to 15. The v-else-if condition evaluates to true and it gets rendered to the DOM as shown below.

Changing the val to 90 makes both v-if and v-else-if expressions evaluate to false. Hence the v-else element is rendered.

Sticky note: Similar to v-else, the element with v-else-if directive must immediately follow an element with v-if or v-else-if. Otherwise, it will not be recognized.

All the code discussed above is available in the GitHub repo

Time to put on your developer hat and do some experimenting with these directives! Have a nice day.