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.

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 backward in our code development by starting with the following code for the main section:

<main>
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <ul>  <!-- v-show directive removed! -->
        <li v-for="(user, index) in users" v-bind:key="user">{{ index }}: {{ user }}</li>
    </ul>
</main>

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:

<main>
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <ul v-if="displayUsers">
        <li v-for="(user, index) in users" v-bind:key="user">{{ index }}: {{ user }}</li>
    </ul>
</main>

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

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

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:

<main>
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <ul v-show="displayUsers">
        <li v-for="(user, index) in users" v-bind:key="user">{{ index }}: {{ user }}</li>
    </ul>
</main>

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

However, the unordered list (<ul> element) has a style of display: None attached to it which prevents the list of users from being displayed.

How v-if Toggles the HTML Elements

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

<main>
    <button v-on:click="displayUsers = !displayUsers">Display Users!</button>
    <h1>List of Users:</h1>
    <ul v-if="displayUsers">
        <li v-for="(user, index) in users" v-bind:key="user">{{ index }}: {{ user }}</li>
    </ul>
</main>

We can then see in the developer tools that the unordered list (and its <li> elements) are NOT being created when the webpage loads:

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:

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 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.

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 directives are not at the same level (i.e., indentation):

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

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

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

There are 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's what the webpage looks like now when you load it:

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

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 display 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.