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 thev-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.
More Tips and Tricks for Vue
- How to use Templates in Vue
- The difference between created and mounted in Vue
- How to Watch for Nested Changes in Vue
- Navigation between views in Vue with Vue Router
- How to use v-for in Vue
- Using .env Environment Variables in Vue
- Creating your first Vue App
- How to use Teleport in Vue to Move Parts of Templates
- A Guide to Understanding Vue Lifecycle Hooks
- The Difference Between the Composition API and Options API in Vue