Vue Show Directive

andy - 13 Dec, 2020 713 Views 0 Comment

In the previous article, we have learned how to use Vue If Directive. Today we are going to compare the Vue show directive and see what is the difference. If you have not read the Vue If Directive article, you can click this link.

The main difference between Vue if and show directive is the Vue if directive will remove the content of the condition in the DOM while the show directive will only hide the content using a CSS stylesheet. So which one should we choose? Well, it all depends on your need. If you think the hidden content is not important and there is no reference related to the content itself then you can use the if condition. Otherwise use the show directive will do the job anyway. In other cases, if the content is going to display and hide regularly. It is recommended to use the show directive instead because there is no need to reload the content into the DOM.

Let see the show directive in action below.

<!doctype html>
		<title> - Vue Show Directive</title>
		<div id="app">
			<h3 v-show="firstFlag">This heading is visible.</h3>
			<h3 v-show="secondFlag">This heading is hidden using CSS.</h3>
	<script src=""></script>
		var app = new Vue({
			el: '#app',
			data: {
				firstFlag: true,
				secondFlag: false

If you see on the above code. I have declared two data boolean variables. The first variable named "firstFlag" will have a true value while the second one named "secondFlag" will have a false value. 

Based on those values, we can definitely know that the first H3 heading will be displayed (visible) while the second one will be hidden using CSS. I have included a screenshot below using the chrome inspector against the DOM content.


If you the screenshot image, Vue had added a CSS style display to none value against the H3 heading tag.


To see the live demo, you can click the following link.

See Vue Show Directive in action.


To download the demo file. Please click the following URL link.

Download file.


There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials

How to set radio button checked in Vue.js?

If you have a group of radio buttons and want to bind and set a radio button to be checked. You can perform a condition against the checked property value of the radio button.

How to use methods in Vue.js?

In this tutorial we are going to learn on how to use methods in Vue js So what actually a method is in Vue js A method can be considered as an action It has a function procedure that is ...

VueJS Button Click Event

We are going to create a really simple VueJS application to showcase a button click event handling in VueJS.

What is a Vue.js?

Vue js is another popular javascript library for building interactive web interfaces The library is designed to focus on the view layer only It is very lightweight and pretty easy to use compare to another library competitors such as Angular ...