YouTipVue3 V Show
# Vue3 v-show Directive
[ Vue3 Built-in Directives](#)
* * *
The `v-show` directive is used to toggle the visibility of an element based on the truthiness of an expression. It controls the display and hiding of elements through the CSS `display` property.
* * *
## Basic Description
The `v-show` directive determines whether an element is displayed based on the truthiness of the bound expression. Whether the condition is true or false, the element will always be rendered to the DOM, with its visibility controlled via CSS.
* **Expected Type**: any
* **Purpose**: Toggle element visibility based on expression truthiness, controlled through CSS display property.
* * *
## Difference Between v-show and v-if
| Feature | v-show | v-if |
| --- | --- | --- |
| Rendering Method | Always rendered to DOM, only controls show/hide | Rendered when true, not rendered when false |
| Toggle Performance | Low toggle cost (only changes CSS) | High toggle cost (needs to create/destroy elements) |
* * *
## Usage Scenarios
### 1. Frequently Toggling Display State
When an element needs to be shown/hidden frequently, using v-show has better performance:
## Example
export default {
data() {
return { showModal: false }
}
}
* * Vue3 Built-in Directives](#)