Vue — Conditional Rendering

v-if

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    }
  }
}
</script>

v-else-if

<div v-if="score >= 90">A</div>
<div v-else-if="score >= 80">B</div>
<div v-else-if="score >= 70">C</div>
<div v-else>F</div>

v-else

<div v-if="items.length">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>
<div v-else>No items found</div>

v-show

<div v-show="isVisible">Visible content</div>

v-if vs v-show

Feature	v-if	v-show
Rendering	Lazy	Always rendered
DOM	Added/removed	Display toggle
Performance	Good for toggles	Good for frequent
Transition	Supports	Supports

Template v-if

<template v-if="isLoggedIn">
  <h1>Dashboard</h1>
  <p>Welcome!</p>
</template>

Multiple root elements

<template v-if="show">
  <header>Header</header>
  <main>Content</main>
</template>

Conditional with v-for

<ul>
  <li v-for="item in items" :key="item.id">
    <span v-if="item.active">{{ item.name }}</span>
  </li>
</ul>

Mini Practice

1. Toggle elements with v-if
2. Use v-else-if for multiple conditions
3. Compare v-if and v-show performance
4. Conditionally render lists

Up Next

Continue with Lists - Rendering arrays with v-for.