v-show
v-show keeps an element in the page and just switches its CSS display on and off.
In this page:
Syntax
<p v-show="condition">toggled with CSS display</p>v-show
v-show toggles the display property, so the element always exists in the DOM. It is cheaper for frequent toggling than v-if but has a higher initial cost because everything renders up front. It does not work on template and has no else counterpart.
Note:
Use v-show for things toggled often, like dropdowns and tabs.
Example: v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="open = !open">Toggle</button>
<p v-show="open">Now you see me</p>
</div>
<script>
Vue.createApp({ data() { return { open: false }; } }).mount("#app");
const p = document.querySelector("p");
console.log("initially display:", p.style.display);
document.querySelector("button").click();
Vue.nextTick(() => console.log("after click display:", JSON.stringify(p.style.display)));
</script>
</body>
</html>
<!-- Output:
Rendered: ToggleNow you see me
console: initially display: none
console: after click display: ""
-->Live Example
Related Topics
Common Mistakes
- Using v-show on template elements
- Expecting v-show to skip rendering
- Combining with v-else
Chapter Summary
- v-show toggles CSS display
- The element always exists
- Cheap for frequent toggles
- Not usable on template
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: