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
}
}
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.
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>
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 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>
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,
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.