Vue v-show Directive
Example
Using the v-show directive to conditionally toggle the visibility of a <div> element, depending on the value of 'showDiv'.
<div v-show="showDiv">This div tag can be hidden</div>
Try it Yourself »
See more examples below.
Definition and Usage
The v-show directive is used to conditionally toggle the visibility of an element.
When the expression used by v-show evaluates to 'false', the CSS display property is set to 'none', and otherwise the CSS display property falls back to the default value.
An element with v-show is mounted once and remain in the DOM, only its visibility is toggled with v-show.
v-show triggers transition classes and events when used with the built-in <Transition> component.
Lifecycle hooks like mounted/unmounted, or activated/deactivated are not triggered when the visibility of an object is toggled with v-show.
v-show vs. v-if
The v-show and v-if directives are apparently quite similar, because they can both toggle an element so that it is displayed or not, but here are some differences:
v-show |
v-if |
|
|---|---|---|
| Creates and destroys an element in the DOM when it is toggled? | no | yes |
Triggers lifecycle hooks mounted/unmounted when an element is toggled? |
no | yes |
Triggers transition events and classes for leaving and entering when used with the built-in <Transition> component? |
yes | yes |
Works with the built-in <template> element? |
no | yes |
Works with v-else-if and v-else? |
no | yes |
More Examples
Example
The v-show and v-if directives are used side-by-side to conditionally toggle the visibility of a <div> element.
Open the example, set the condition to 'false', then right-click and inspect the page to see that the element with v-show still exists in the DOM.
<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 »
Example
A <p> element becomes visible with v-show and triggers the after-enter event.
<template>
<h1>JavaScript Transition Hooks</h1>
<p>This code hooks into "after-enter" so that after the initial animation is done, a method runs that displays a red div.</p>
<button @click="pVisible=true">Create p-tag!</button><br>
<Transition @after-enter="onAfterEnter">
<p v-show="pVisible" id="p1">Hello World!</p>
</Transition>
<br>
<div v-show="divVisible">This appears after the "enter-active" phase of the transition.</div>
</template>
<script>
export default {
data() {
return {
pVisible: false,
divVisible: false
}
},
methods: {
onAfterEnter() {
this.divVisible = true;
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 1s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1, div {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p1 {
background-color: lightgreen;
}
div {
background-color: lightcoral;
}
</style>
Related Pages
Vue Tutorial: Vue v-show Directive
Vue Tutorial: Vue v-if Directive
Vue Tutorial: Vue Animations
Vue Reference: Vue <Transition> Component
Vue Reference: Vue v-if Directive
