Why conditional rendering matters in Vue - See It in Action

Why conditional rendering matters

📖 Scenario: You are building a simple Vue app that shows a welcome message only when the user is logged in. This is common in real websites where some parts appear only if you are signed in.

🎯 Goal: Create a Vue component that conditionally shows a welcome message based on a logged-in status. You will learn how to use Vue's conditional rendering to control what the user sees.

📋 What You'll Learn

Create a reactive variable called isLoggedIn with initial value false.

Create a button that toggles isLoggedIn between true and false.

Use Vue's v-if directive to show a <p> with text Welcome back, user! only when isLoggedIn is true.

Use Vue 3 Composition API with <script setup> and ref.

💡 Why This Matters

🌍 Real World

Many websites show or hide parts of the page depending on whether a user is logged in. Conditional rendering helps create dynamic, user-friendly interfaces.

💼 Career

Understanding conditional rendering is essential for frontend developers to build interactive apps that respond to user actions and state changes.

1

Set up the reactive login state

Inside the <script setup> block, create a reactive variable called isLoggedIn using ref and set it to false.

Vue

  



// Create a reactive variable called isLoggedIn and set it to false
// Your code here

Hint

Use import { ref } from 'vue' and then const isLoggedIn = ref(false).

2

Add a button to toggle login state

In the <template>, add a <button> that toggles isLoggedIn between true and false when clicked. Use the @click event with an inline arrow function.

Vue

  
  



import { ref } from 'vue'

const isLoggedIn = ref(false)

Hint

Use <button @click="() => isLoggedIn.value = !isLoggedIn.value"> to toggle the value.

3

Use v-if to conditionally show welcome message

Below the button in the <template>, add a <p> element with text Welcome back, user! that only appears when isLoggedIn is true. Use Vue's v-if directive with isLoggedIn.

Vue

   isLoggedIn.value = !isLoggedIn.value">Toggle Login
   with 'Welcome back, user!' that shows only if isLoggedIn is true -->
  



import { ref } from 'vue'

const isLoggedIn = ref(false)

Hint

Use <p v-if="isLoggedIn.value">Welcome back, user!</p> to show the message only when logged in.

4

Add accessibility and finalize component

Add an aria-pressed attribute to the button that reflects the isLoggedIn state for accessibility. The attribute value should be isLoggedIn. This helps screen readers understand the toggle state.

Vue

   isLoggedIn.value = !isLoggedIn.value" aria-pressed="">Toggle Login
  Welcome back, user!



import { ref } from 'vue'

const isLoggedIn = ref(false)

Hint

Bind aria-pressed to isLoggedIn using :aria-pressed="isLoggedIn.value".

Practice

1. Why is conditional rendering important in Vue applications?

easy

A. It speeds up the Vue app by skipping all rendering.

B. It automatically styles components without CSS.

C. It controls what content is shown based on conditions, improving user experience.

D. It replaces the need for JavaScript event handlers.

Solution

1. Step 1: Understand conditional rendering purpose

   Conditional rendering shows or hides parts of the page based on data or user actions.

2. Step 2: Connect to user experience

   Showing relevant content only makes the app easier and friendlier to use.

3. Final Answer:

   It controls what content is shown based on conditions, improving user experience. -> Option C

4. Quick Check:

   Conditional rendering = control content display [OK]

Hint: Conditional rendering controls visible content based on conditions [OK]

Common Mistakes:

• Thinking it styles components automatically
• Believing it skips all rendering to speed app
• Confusing it with event handling

2. Which of the following is the correct syntax for conditional rendering in Vue to show a paragraph only if isVisible is true?

easy

A. Visible paragraph

B. Visible paragraph

C. Visible paragraph

D. Visible paragraph

Solution

1. Step 1: Identify correct directive for conditional rendering

   Vue uses v-if to conditionally render elements based on a boolean.

2. Step 2: Check syntax correctness

   v-if="isVisible" correctly binds the condition to show the paragraph only if true.

3. Final Answer:

   <p v-if="isVisible">Visible paragraph</p> -> Option A

4. Quick Check:

   Use v-if for conditional rendering [OK]

Hint: Use v-if="condition" to show/hide elements [OK]

Common Mistakes:

• Using v-for instead of v-if for conditions
• Confusing v-show with v-if (v-show toggles visibility but renders always)
• Using v-bind incorrectly for conditional rendering

3. Given this Vue template snippet:

<template>
  <div>
    <p v-if="showMessage">Hello User!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

What will be displayed if showMessage is false?

medium

A. Please log in.

B. Hello User!

C. Nothing will be displayed.

D. Both paragraphs will be displayed.

Solution

1. Step 1: Understand v-if and v-else behavior

   If showMessage is false, the v-if block is skipped and v-else block runs.

2. Step 2: Determine displayed content

   The v-else paragraph with text "Please log in." will be shown.

3. Final Answer:

   Please log in. -> Option A

4. Quick Check:

   v-if false shows v-else block [OK]

Hint: v-else shows content when v-if condition is false [OK]

Common Mistakes:

• Thinking both paragraphs show at once
• Assuming nothing shows if v-if is false
• Confusing v-else with v-show

4. Consider this Vue template:

<template>
  <div>
    <p v-if="isActive">Active</p>
    <p v-else-if="isPending">Pending</p>
    <p v-else>Inactive</p>
  </div>
</template>

What is wrong if none of the paragraphs show even when isActive and isPending are both false?

medium

A. The variables isActive and isPending must be true to render anything.

B. Nothing is wrong; the last v-else should show 'Inactive'.

C. You cannot use v-else-if after v-if.

D. The v-else is missing a condition and causes error.

Solution

1. Step 1: Review v-if, v-else-if, and v-else logic

   Vue renders the first true condition block; if none are true, v-else runs.

2. Step 2: Check variables false case

   Both isActive and isPending false means v-else block should show 'Inactive'.

3. Final Answer:

   Nothing is wrong; the last v-else should show 'Inactive'. -> Option B

4. Quick Check:

   v-else runs if all previous conditions false [OK]

Hint: v-else shows when all prior conditions are false [OK]

Common Mistakes:

• Thinking v-else needs a condition
• Believing v-else-if is invalid after v-if
• Assuming no output if all conditions false

5. You want to display a list of users but only show those who are active. Which Vue template snippet correctly uses conditional rendering inside a v-for loop to achieve this?

hard

A. <ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>

B. <ul>
<li v-for="user in users">
<span v-if="user.active">{{ user.name }}</span>
</li>
</ul>

C. <ul>
<li v-if="users.active" v-for="user in users">{{ user.name }}</li>
</ul>

D. <ul>
<li v-for="user in users" v-if="user.active">{{ user.name }}</li>
</ul>

Solution

1. Step 1: Understand filtering with v-if inside v-for

   Using v-if on the same element as v-for filters which items render.

2. Step 2: Check each option's logic

   <ul>
     <li v-for="user in users" v-if="user.active">{{ user.name }}</li>
   </ul>

   applies v-if="user.active" on the <li> with v-for, showing only active users.

3. Final Answer:

   <ul> <li v-for="user in users" v-if="user.active">{{ user.name }}</li> </ul> -> Option D

4. Quick Check:

   v-if on v-for element filters rendered items [OK]

Hint: Put v-if on same element as v-for to filter list items [OK]

Common Mistakes:

• Placing v-if inside child elements causing empty list items
• Using "users.active" instead of "user.active" (always false)
• Not filtering at all, showing all users