`v-show`

Toggles an element's visibility via CSS display without removing it.

Since Vue 3.0 Spec ↗

Syntax

v-show="expression"

Parameters

Name	Type	Required	Description
`expression`	`boolean`	No	Sets display:none when falsy.

Returns

directive — Toggles the element's CSS display.

Examples

<script setup lang="ts">
import { ref } from 'vue';
const open = ref(true);
</script>

<template>
  <button @click="open = !open">Toggle</button>
  <div v-show="open">Panel content</div>
</template>

Notes

v-show always renders the element and only toggles `display`, so it is cheaper for frequent show/hide but always pays initial render cost. It does not support <template> and has no else branch. Prefer v-if when the element is rarely shown or is expensive.