Suggest an editImprove this articleRefine the answer for “What is the difference between v-if and v-show?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)`v-if` and `v-show` are both directives that control an element's visibility, **but they work in fundamentally different ways**: `v-if` fully removes or creates the element in the DOM, while `v-show` simply toggles the CSS `display` property (hides/shows). **Key point:** use `v-if` when the element is shown rarely or its render is expensive, and `v-show` when you need to toggle visibility frequently.Shown above the full answer for quick recall.Answer (EN)Image`v-if` and `v-show` are both directives that control the display of an element, **but they work in fundamentally different ways**. This is one of the most common interview questions. --- ## The main difference #### `v-if` **fully removes/creates the element in the DOM.** #### `v-show` **simply toggles the CSS property** `display` **(hides/shows).** --- ## Detailed comparison ### 1. How it works #### `v-if` - the element **is created** when the condition is `true` - the element **is removed** when the condition is `false` - each toggle → an actual DOM change ```html <div v-if="visible">Hello</div> ``` #### `v-show` - the element **always exists in the DOM** - Vue only changes the style: ```css display: none; ``` ```html <div v-show="visible">Hello</div> ``` --- ### 2. Performance #### `v-if` is heavier for frequent toggling Because: - a new DOM element is created - lifecycle hooks are called (mounted, unmounted) - Vue recalculates the virtual DOM #### `v-show` is lighter for frequent show/hide Only CSS changes. --- ### 3. When to use which? #### Use `v-if` if: - the element is shown **rarely** - rendering the element is expensive (complex components, large lists) - you need to fully remove the element from the DOM (for example, a modal, expensive blocks) Example: the element is visible only after data has loaded. #### Use `v-show` if: - you need to toggle visibility frequently (menus, tabs, accordions) - there is no point recreating the element - the content is simple and light --- ### 4. `<template>` works **only** with `v-if` ```html <template v-if="show"> <h1>Title</h1> <p>Text</p> </template> ``` For `v-show`, `<template>` doesn't make sense, it must be on the element itself. --- ### 5. Animations - `v-if` works with **enter/leave animations** (the element appears/disappears) - `v-show` works only with **visibility animations** (the element stays in the DOM) --- ## Comparison example #### `v-if` ```html <div v-if="isOpen">Content</div> ``` Result: - isOpen = false → the element is NOT in the DOM - isOpen = true → the element is added #### `v-show` ```html <div v-show="isOpen">Content</div> ``` Result: - the element is ALWAYS in the DOM - isOpen = false → `display: none` - isOpen = true → `display: block`For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.