How v-if and v-else work in Vue

📣 Sponsor

Vue templating comes with all sorts of easy shortcuts to implement advanced functionality. One set of these is v-for and v-if. These statements can be added to HTML tags to make your page more dynamic. Let's look at how they work.

How v-if works in Vue

v-if is essentially an if statement for your Vue. If the statement within it is true, then the HTML tag will display. Otherwise, it won't. For example, let's say we had the following Vue file:


<template>
    <div class="my-div" v-if="totalParcels > 5">You have more than 5 items!</div>
</template>
<script>
export default {
    data() {
        return {
            totalParcels: 6
        }
    }
}
</script>

In our v-if, we check if the data item totalParcels is more than 5. If it is, we show the div. In this case, it is, so the div will appear. If we change totalParcels to 4, the div will disappear!

Since we have v-if, we also have v-else and v-else-if.

How v-else and v-else-if work in Vue

In the example below, we check for a few criteria. If totalParcels changes, we can now show different content to the user. Note: if we use v-else and v-else-if, we need a v-if to go along with them. All our divs should be beside each other, as shown below.


    <template>
    <div class="my-div" v-if="totalParcels == 0">You have no items.</div>
    <div class="my-div" v-else-if="totalParcels < 5">You have less than 5 items!</div>
    <div class="my-div" v-else="totalParcels > 5">You have  items!</div>
</template>
<script>
export default {
    data() {
        return {
            totalParcels: 6
        }
    }
}
</script>

How to hide multiple elements with v-if

Since v-if needs to be attached to one element, hiding multiple elements using the same v-if requires that we put a wrapper around all the elements we want to hide. If you want to hide multiple elements with a v-if statement, you have two options:

Wrap the elements you want to hide or show in another HTML tag like <div>, and use the v-if on that element.
Wrap the elements you want to hide or show in a <template> tag, which will not render in the HTML, but allow us to hide multiple elements.

Option 1 has some benefits in certain circumstances - but if you don't want your HTML to be nested, using the <template> tag is your best bet.

The difference between v-show vs v-if

In vue, we also have a property called v-show. It works almost the same as v-if/v-else. The difference is that with v-if, the HTML tag completely disappears if the v-if statement is false. With v-show, the HTML element is instead set to display: none; if the statement is false, so the HTML will still exist on the page. This can be useful in some specific scenarios.


<template>
    <!-- if totalParcels doesn't equal 0, then the div will still render in the HTML, but it will not display on the page. -->
    <div class="my-div" v-show="totalParcels == 0">You have no items.</div>
</template>

As you can see, v-if becomes incredibly useful when we're changing data, and want to notify users of these changes in our applications. If you want to learn more about Vue, you can check out more Vue content here.

Last Updated 1645547019816