# Vue 3 Conditional Rendering (`v-if`)
In Vue 3, you can control how and when components or elements are rendered in the DOM using conditional directives.
The primary conditional directives in Vue 3 are `v-if`, `v-else-if`, `v-else`, and `v-show`. This tutorial covers their syntax, usage, practical examples, and performance differences.
---
## Overview of Conditional Directives
* **`v-if`**: Real conditional rendering. If the expression evaluates to `false`, the element is completely removed from the DOM. It has lower initial render costs but higher toggle costs.
* **`v-else-if` and `v-else`**: Used to handle multiple conditional branches in conjunction with `v-if`.
* **`v-show`**: The element is always rendered and remains in the DOM. Vue simply toggles its visibility using the CSS `display` property. It has higher initial render costs but very low toggle costs.
---
## The `v-if` Directive
The `v-if` directive conditionally renders an element based on the truthiness of an expression. If the expression returns `true`, the element is rendered; if it returns `false`, the element is not generated in the DOM at all.
### Basic Usage
```html
```
### Conditional Groups with `
`
Because `v-if` is a directive, it must be attached to a single element. If you want to toggle multiple elements together, you can wrap them in a `` element and apply `v-if` to it. The final rendered result will not include the `` element itself.
```html
Websites
Google
YouTip
GitHub
```
---
## The `v-else` Directive
You can use the `v-else` directive to provide an "else" block for `v-if`. It must immediately follow a `v-if` or a `v-else-if` element; otherwise, it will not be recognized.
```html
The random number is greater than 0.5
The random number is less than or equal to 0.5
```
---
## The `v-else-if` Directive
The `v-else-if` directive acts as an "else if" block for `v-if`. It can be chained multiple times to handle complex multi-conditional logic.
```html
Grade A
Grade B
Grade C
Not A, B, or C
```
> **Note:** A `v-else` or `v-else-if` element must immediately follow a `v-if` or `v-else-if` element.
---
## The `v-show` Directive
Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
```html
Hello!
```
Unlike `v-if`, an element with `v-show` will always be rendered and remain in the DOM. Vue only toggles the element's inline CSS `display` property (e.g., `display: none`).
---
## Key Differences: `v-if` vs. `v-show`
| Feature | `v-if` | `v-show` |
| :--- | :--- | :--- |
| **DOM Presence** | Element is dynamically added/removed from the DOM. | Element always remains in the DOM. |
| **CSS Mechanism** | None (element is destroyed/created). | Toggles the inline `display` style. |
| **Initial Render Cost** | Low (if the initial condition is false, it does nothing). | High (always compiles and renders the element). |
| **Toggle Cost** | High (triggers full destruction and reconstruction of the element and its child components). | Low (only triggers a CSS style update). |
| **`` Support** | Supported. | Not supported. |
### Best Practices
* Use **`v-show`** if you need to toggle something very frequently (e.g., tabs, accordion menus, modal visibility).
* Use **`v-if`** if the condition is unlikely to change during runtime, or if you want to optimize initial page load speeds by avoiding rendering off-screen components.
YouTip