Vue v-show
Directive
Learn how to make an element visible or not with v-show
.
v-show
is easy to use because the condition is written right in the HTML tag attribute.
Conditional Visibility
The v-show
directive hides an element when the condition is 'false' by setting the CSS 'display' property value to 'none'.
After writing v-show
as an HTML attribute we must give a conditon to decide to have the tag visible or not.
Syntax
<div v-show="showDiv">This div tag can be hidden</div>
In the code above, 'showDiv' represents a boolean Vue data property with either 'true' or 'false' as property value. If 'showDiv' is 'true' the div tag is shown, and if it is 'false' the tag is not shown.
Example
Display the <div> element only if the showDiv property is set to 'true'.
<div id="app">
<div v-show="showDiv">This div tag can be hidden</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
Try it Yourself »
v-show
vs. v-if
The difference between v-show
and v-if
is that v-if
creates (renders) the element depending on the condition, but with v-show
the element is already created, v-show
only changes its visibility.
Therefore, it is better to use v-show
when switching visibility of an object, because it is easier for the browser to do, and it can lead to a faster response and better user experience.
A reason for using v-if
over v-show
is that v-if
can be used with v-else-if
and v-else
.
In the example below v-show
and v-if
are used separately on two different <div> elements, but based on the same Vue property. You can open the example and inspect the code to see that v-show
keeps the <div> element, and only sets the CSS display property to 'none', but v-if
actually destroys the <div> element.
Example
Display the two <div> elements only if the showDiv property is set to 'true'. If the showDiv property is set to 'false' and we inspect the example page with the browser we can see that the <div> element with v-if
is destroyed, but the <div> element with v-show
has just CSS display property set to 'none'.
<div id="app">
<div v-show="showDiv">Div tag with v-show</div>
<div v-if="showDiv">Div tag with v-if</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
Try it Yourself »