v-if directive behavior in Vue - Mini Project: Build & Apply

Understanding v-if Directive Behavior in Vue

📖 Scenario: You are building a simple Vue app that shows a welcome message only when a user is logged in. This is common in websites where content changes based on user status.

🎯 Goal: Create a Vue component that uses the v-if directive to conditionally display a welcome message when the user is logged in.

📋 What You'll Learn

Create a reactive variable isLoggedIn with initial value false.

Add a button to toggle the isLoggedIn state.

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

Ensure the button text changes to Log out when logged in and Log in when logged out.

💡 Why This Matters

🌍 Real World

Many websites show or hide content based on user login status. Using v-if helps control what users see dynamically.

💼 Career

Understanding conditional rendering with v-if is essential for Vue developers building interactive user interfaces.

1

Set up the reactive login state

Create a Vue component with a reactive variable called isLoggedIn initialized to false using the ref function from Vue.

Vue

  
  



import { ref } from 'vue'
// Create a reactive variable isLoggedIn set to false
// Your code here

Need a hint?

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

2

Add a button to toggle login state

Add a <button> inside the <div> that toggles the isLoggedIn value when clicked. Use the @click event with a function that sets isLoggedIn.value = !isLoggedIn.value. The button text should be Log in when isLoggedIn is false and Log out when true, using interpolation.

Vue

  
    
    
    
  



import { ref } from 'vue'
const isLoggedIn = ref(false)

Need a hint?

Use @click="isLoggedIn.value = !isLoggedIn.value" on the button and interpolation for the text.

3

Use v-if to conditionally show welcome message

Inside the <div>, add a <p> tag with the text Welcome back, user!. Use the v-if directive on this <p> to show it only when isLoggedIn.value is true.

Vue

  
    
      {{ isLoggedIn.value ? 'Log out' : 'Log in' }}
    
     with v-if to show welcome message only when logged in -->
    
  



import { ref } from 'vue'
const isLoggedIn = ref(false)

Need a hint?

Use v-if="isLoggedIn.value" on the <p> tag.

4

Add accessibility and final touches

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

Vue

  
    
      {{ isLoggedIn.value ? 'Log out' : 'Log in' }}
    
    Welcome back, user!
  



import { ref } from 'vue'
const isLoggedIn = ref(false)

Need a hint?

Bind aria-pressed using :aria-pressed="isLoggedIn.value" on the button.