Hide and Show element in Vue js - Toggle visibility

In this tutorial, we will see different ways how to hide/show elements in Vue.

Sometimes we might want to toggle the visibility of elements on a webpage based on the user input, which in turn helps to have a good user experience on the website.

In vuejs, we can achieve these using Vue directives like :

• v-if (remove the element complete from DOM)
• v-show (hide element using display:none), and
• CSS with class binding.

Using these directives and class binding we can hide/show HTML elements on our web page.

Hide/Show elements using v-if directive

The v-if is an in-built directive that takes a boolean as a value and toggles the visibility element according to the value. It completely adds and removes the HTML element from the DOM.

<div v-if="true">
    This is a HTML div
</div>

So if the value is true, it will insert the element into the DOM. And if the value is false, it will remove the element from the DOM.

Example:

<template>
    <div>
        <div v-if="active">
            Show Element 
        </div>
        <div v-if="inactive">
            Remove Element
        </div>
    </div>
</template>

<script>
import default{
    data(){
        active: true,
        inactive: false,
    }
}
</script>

The element with v-if ="active" will be rendered in the DOM because the value of the active is true.

While the element with v-if="inactive" will not be rendered because the value is set to false.

Using v-show to show/hide elements in Vue

The v-show is also an in-built Vue directive that hides the element from the DOM using display: none.

v-show do not remove the element completely from the DOM, instead, it just hides it from the DOM.

The v-show directive takes boolean values and if the value is true, it displays the element, else if it's false, it will hide the element.

Example:

<template>
    <div>
        <div v-show="isVisible">
            This Element is Visible
        </div>
        <div v-show="isHidden">
            This Element is Hidden
        </div>
    </div>
</template>

<script>
import default{
    data(){
        isVisible: true,
        isHidden: false,
    }
}
</script>

The element with v-show="isVisible" will be visible on the DOM as the value is true, while the second element will not be visible as the value is false.

Using CSS with class binding to hide and show elements in Vue

The v-if and v-show directives usually get the job done. However, if you want to use CSS as an alternative method to hide or show a div we can use it using the class binding method in Vue.

This is helpful if you want to add other CSS properties like visibility which is not possible with the vue directives.

To bind a class with CSS, we have to create the styles

hideElement{
    display : none;
}

The display : none means the element of the class hideElement will be hidden.

Now on our template,

<template>
    <div>
        <div :class="{ hideElement: value1 }">
            This Element is Visible
        </div>
        <div :class="{ hideElement: value2 }">
            This Element is Hidden
        </div>
    </div>
</template>

<script>
import default{
    data(){
        value1: false,
        value2: true,
    }
}
</script>


<style>
hideElement{
    display : none;
}
</style>

So the first element where the value1 is false, the class hideElement will not be active so the element will be visible on the DOM.

And the second element where the value2 is true, will bind the hideElement class to the div and the element will be hidden from the DOM.

That's it, these are the three approaches that you can take to hide/show elements in Vue applications.