Conditional Rendering (v-if)

Vue allows you to show or hide elements based on conditions using the v-if directive. This helps control what appears in the interface depending on your data.

<script setup>
import { ref } from "vue";

const isVisible = ref(true);
</script>

<template>
  <p v-if="isVisible">This text is visible</p>
</template>

The element is rendered only when the condition is true. If the value becomes false, the element is removed from the page.

You can also use v-else to display an alternative.

<template>
  <p v-if="isVisible">Visible</p>
  <p v-else>Hidden</p>
</template>

Example with a button:

<script setup>
import { ref } from "vue";

const isVisible = ref(true);

function toggle() {
  isVisible.value = !isVisible.value;
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <p v-if="isVisible">Now you see me</p>
  <p v-else>Now you don’t</p>
</template>

Conditional rendering allows you to control the UI based on application state.