v-show Toggle Visibility via CSS
Last updated: 2026-10-22
v-show Toggle Visibility via CSS
v-show toggles the element's display style from the expression. The element always stays in the DOM — only visibility changes.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<p v-show="isVisible">Now you see me</p>⚙️ Arguments
| expression | Any truthy/falsy expression |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
Toggling hides/shows the text while the element remains in the DOM with display: none.💡 Key Points
💡 Tip For frequent toggling v-show is cheaper — it only flips CSS, no DOM churn.
ℹ️ Note When initially falsy the element still renders (kept in place), costing more up-front.
⚠️ Warning v-show does not support v-else — it is a style toggle, not a branching directive.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q v-show or v-if — which one?
A Frequent toggling → v-show (CSS only). Rare changes or lazy rendering → v-if.
Q Does DevTools still show a v-show-hidden element?
A Yes, the element stays in the DOM with display: none.
Q Can v-show be paired with v-else?
A No — v-show is not a branching directive; use v-if / v-else for exclusive rendering.
