v-if and v-else Directives

Part 1, Chapter 7


In this chapter, we're going to be learning about two Vue directives: v-if and v-else.

These directives allow you to conditionally display HTML elements using IF-ELSE blocks, much like you would do in most programming languages.

Source Code

All of the code for this course is stored on GitLab in the following repository:

vue-crud-course-code on GitLab

Part I (Vue Fundamentals) of this course has a corresponding branch (part1_vue_fundamentals) in the repository.

Conditionally Displaying HTML Elements Using the v-if Directive

The v-if directive is used to conditionally display elements.

Let's start by going slightly backwards in our code development by starting with the following code for the data-content section:

<div class="data-content">
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <br>
    <ul v-for="(user, index) in users">
        <li>{{ index }}: {{ user }}</li>
    </ul>
</div>

At this point, there is a button that allows us to toggle the displayUsers data property, but it has no effect on whether or not the list of users is displayed (as the v-show directive was removed from the <ul> tag).

Similar to how we used the v-show directive in the last chapter, the v-if directive can be applied to only show the list of users if the displayUsers property is true:

<div class="data-content">
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <br>
    <ul v-if="displayUsers" v-for="(user, index) in users">
        <li>{{ index }}: {{ user }}</li>
    </ul>
</div>

With the addition of the v-if directive, our webpage loads without the users being displayed:

v-if Example Before Clicking Button

After you click on the button, the list of users gets displayed:

v-if Example After Clicking Button

If you click on the button again, the list of users will disappear as the displayUsers property was toggled back to false.

v-if vs. v-show

At this point, you might be thinking that the v-if and v-show directives do the same thing. For the examples that we've seen so far, they are effectively doing the same thing, but they do have a significant difference that I want to highlight.

How v-show Toggles the HTML Elements

If we go back to using the v-show directive to conditionally display the list of users:

<div class="data-content">
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <br>
    <ul v-show="displayUsers" v-for="(user, index) in users">
        <li>{{ index }}: {{ user }}</li>
    </ul>
</div>

We can then see in the developer tools that all of the list item elements are being created when the webpage loads:

v-show Developer Tools Examine

However, each list item (<li> element) has a style of display: None attached to them which prevents them from being displayed.

How v-if Toggles the HTML Elements

If we use the v-if directive to conditionally display the list of users:

<div class="data-content">
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <br>
    <ul v-if="displayUsers" v-for="(user, index) in users">
        <li>{{ index }}: {{ user }}</li>
    </ul>
</div>

We can then see in the developer tools that the list item elements are NOT being created when the webpage loads:

v-if Developer Tools Examine Before Clic

If you then click on the button to display the list of users, you will see that all of the list items elements are now created:

v-if Developer Tools Examine After Click

When to Use v-show vs v-if Directives

After seeing the difference between how the v-show and v-if directives work, I wanted to make some recommendations on when to use each of them.

If you expect the HTML elements to be toggled frequently in your webpage, then the v-show directive is preferred, as it will update faster (the v-show directive has lower toggle costs in terms of time).

If the components that are being toggled are more complex, say they contain event listeners or components (discussed in a later chapter), then the v-if directive is preferred. The v-if directive performs a deeper toggling than the v-show directive, as it will make sure that event listeners and components are properly destroyed and re-created during toggles.

In our current example where the list of users is a list of text, the v-show directive works well.

As we expand the functionality of what is being displayed in our list (adding event listeners and components), the v-if directive will be the preferred option.

One more thing, the v-if directive has a related directive known as the v-else directive...

Using the 'v-else' Directive

The v-else directive is used to display an ELSE block within a standard IF-ELSE statement. The v-else directive should always be used in tandem with the v-if directive.

In order to properly use the v-if and v-else directives together, the directives need to be used at the same level within your HTML code.

For example, this is a valid use:

<div v-if="displayUsers">
     ...
</div>
<div v-else>
    ...
</div>

However, this code below would not work properly as the directive are not at the same level (i.e., indentation):

<div class="data-content">
    <ul v-if="displayUsers">
          ...
    </ul>
</div>
<h4 v-else>
    ...
</h4>

Here's the updated code for using the v-if and v-else directives to conditionally display the list of users:

<div class="data-content">
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <br>
    <div v-if="!displayUsers">
        <h4>Users are not being displayed.<h4>
    </div>
    <div v-else>
      <ul v-for="(user, index) in users">
          <li>{{ index }}: {{ user }}</li>
      </ul>
    </div>
</div>

I made some significant modifications in this updated code. First, the v-if block now contains <h4> text to tell the user that this list is not being displayed. This block is displayed when the displayUsers property is false. I like putting this text in the v-if block as it is what will be displayed first when the webpage loads; it just feels more intuitive to me to put this in the IF block.

The ELSE block is now a new <div> element that encapsulates displaying the list of users.

Here is what the webpage looks like now when you load it:

v-if-else Example Before Click

And here is the list of users being displayed after clicking on the button:

v-if-else Example After Click

Summary

In this chapter, the v-if and v-else directives were explained. These directives were used to update our webpage to display a message when it first loads (saying that the users are not being displayed) and then displaying the list of users after clicking on the 'display' button.

If you want to get even more complex, there is the v-else-if directive available to make even more complex IF-ELSEIF-ELSE blocks of logic.




Mark as Completed