Vue v-show

Vue v-show Directive

Another directive used for conditionally displaying an element is v-show.

The usage is nearly identical to v-if, but the way it operates behind the scenes is completely different.

Understanding this difference is crucial for building high-performance Vue applications.

How v-show Works

Unlike v-if, an element with v-show will always be rendered and remain in the DOM.

When the condition becomes false, Vue simply applies the CSS property display: none to hide it.

When it becomes true, Vue removes the CSS property, making it visible again.

<div id="app">
  <h1 v-show="isWarningVisible">Warning: Connection Lost!</h1>
</div>

v-if vs v-show (Performance)

You should choose between v-if and v-show based on how often your element changes state.

v-if has higher "toggle costs". Every time it turns on or off, Vue has to completely create or destroy the DOM element.

v-show has higher "initial render costs". The browser must build the element on page load, even if it is hidden instantly.

The Golden Rule:

• Use v-show if you need to toggle something on and off very frequently (like a dropdown menu).
• Use v-if if the condition is unlikely to change at runtime (like an admin-only dashboard).

No Else Blocks for v-show

It's important to remember that v-show does not support v-else or v-else-if.

If you need complex branching logic, you must use the v-if family instead.