Table of Contents
URL: https://www.progressiverobot.com/vuejs-conditional-directives/
The ability to show or hide elements based on conditions is a fundamental feature of any frontend framework. Vue.js provides us with a set of core directives to achieve this effect: <^>v-if<^>, <^>v-else<^>, <^>v-else-if<^> and <^>v-show<^>.
After getting started with a Vue.js Hello World application, we can use values from JavaScript data object to conditionally control the view. For example, we'll see how to use the simple data object given below.
data() {
return {
msg: "Hello World!",
isLoggedIn: false
}
}
v-if
The <^>v-if<^> directive adds or removes DOM elements based on the given expression.
We can use the isLoggedIn property from the data model and show a login button in the view.
<button v-if="isLoggedIn">Logout</button>
Now, the button will not show because isLoggedIn is set to <^>false<^>. Setting the data.isLoggedIn value to <^>true<^> would add the button to the DOM.
<template> element
The <^>v-if<^> directive can only show or hide one element (and its child elements), but you can also control multiple elements with a single <^>v-if<^> reducing duplication.
To do this, you need to wrap all the elements that should be controlled by this condition in a <^><template><^> element. The template element itself will not be added to the DOM. But all containing elements will be added or removed depending on the <^>v-if<^> expression.
For example, if you need to show a label as well as a button when the isLoggedIn is <^>true<^> you can wrap both elements in a single <^>template<^> element as follows.
<template v-if="isLoggedIn">
<label> Logout </button>
<button> Logout </button>
</template>
v-else
As the name <^>v-else<^> suggests, this directive is used to display content only when the expression adjacent <^>v-if<^> resolves to <^>false<^>.
We can have a <^>Log In<^> button to show automatically when the isLoggedIn is <^>false<^>.
<button v-if="isLoggedIn"> Logout </button>
<button v-else> Log In </button>
<^>v-else<^> does not need a value passed in to it. But it must be in an element that comes immediately after an element containing <^>v-if<^> or <^>v-else-if<^> directives.
v-else-if
<^>v-else-if<^> can be used when we need more than two options to be checked. This will ensure that only one of the chained items in the <^>else-if<^> chain will be visible.
For example, if the property named isLoginDisabled is true, we can prevent the <^>Log In<^> button from displaying and instead display a label. We can accomplish it by using the <^>v-else-if<^> directive as follows.
<button v-if="isLoggedIn"> Logout </button>
<label v-else-if="isLoginDisabled"> Register disabled </label>
<button v-else> Log In </button>
v-show
Very similar to <^>v-if<^>, the <^>v-show<^> directive can also be used to show and hide an element based on an expression.
The main difference between the two is that,
- <^>v-if<^> – Only renders the element to the DOM if the expression passes.
- <^>v-show<^> – Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
- <^>v-show<^> – Does not support <^>v-else<^>, <^>v-else-if<^>
Usually, <^>v-show<^> has a performance advantage if the elements are switched on and off frequently, while the <^>v-if<^> has the advantage when it comes to initial render time.
