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>
<html>
<head>
<title>VueJSTutorial.com - Vue Show Directive</title>
</head>
<body>
<div id="app">
<h3 v-show="firstFlag">This heading is visible.</h3>
<h3 v-show="secondFlag">This heading is hidden using CSS.</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstFlag: true,
secondFlag: false
}
});
</script>
</html>
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.
p>
If you the screenshot image, Vue had added a CSS style display to none value against the H3 heading tag.
Demo
To see the live demo, you can click the following link.
See Vue Show Directive in action.
Download
To download the demo file. Please click the following URL link.