`v-if`

Conditionally renders an element based on a truthy expression.

Since Vue 3.0 Spec ↗

Syntax

v-if="expression"

Parameters

Name	Type	Required	Description
`expression`	`boolean`	No	Element is created when truthy, destroyed when falsy.

Returns

directive — Adds/removes the element from the DOM.

Examples

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

<template>
  <p v-if="loggedIn">Welcome back</p>
  <p v-else>Please sign in</p>
</template>

Notes

v-if truly mounts/unmounts the element and its components (with lifecycle hooks), so it is cheaper when the condition rarely changes. Use v-show for frequent toggling. Combine with v-else / v-else-if on adjacent elements; use a <template v-if> wrapper to toggle groups.