v-else and v-else-if in Vue - Mini Project: Build & Apply

Using v-else and v-else-if in Vue 3

📖 Scenario: You are building a simple Vue 3 app that shows a message based on the current weather condition.

🎯 Goal: Create a Vue 3 component that uses v-if, v-else-if, and v-else directives to display different messages for weather conditions.

📋 What You'll Learn

Create a reactive variable called weather with the value 'sunny'.

Create a reactive variable called temperature with the value 25.

Use v-if to show 'It is sunny and warm!' when weather is 'sunny' and temperature is above 20.

Use v-else-if to show 'It is rainy today.' when weather is 'rainy'.

Use v-else to show 'Weather is unknown.' for all other cases.

💡 Why This Matters

🌍 Real World

Conditional rendering is common in web apps to show different content based on user data or app state, like showing different messages for weather or user status.

💼 Career

Understanding <code>v-if</code>, <code>v-else-if</code>, and <code>v-else</code> is essential for Vue developers to build dynamic and interactive user interfaces.

1

Set up the Vue component with reactive data

Create a Vue 3 component using <script setup>. Inside it, create a reactive variable called weather with the value 'sunny' and another reactive variable called temperature with the value 25.

Vue

  



// Create reactive variables weather and temperature
// Your code here

Need a hint?

Use ref from Vue to create reactive variables.

2

Add the v-if condition for sunny and warm weather

Inside the <template>, add a <p> tag that uses v-if to show the text 'It is sunny and warm!' only when weather is 'sunny' and temperature is greater than 20.

Vue

  
  



import { ref } from 'vue'

const weather = ref('sunny')
const temperature = ref(25)

Need a hint?

Use v-if with a condition combining weather and temperature.

3

Add the v-else-if condition for rainy weather

Below the v-if paragraph, add another <p> tag that uses v-else-if to show the text 'It is rainy today.' only when weather is 'rainy'.

Vue

   20">It is sunny and warm!
  
  



import { ref } from 'vue'

const weather = ref('sunny')
const temperature = ref(25)

Need a hint?

Use v-else-if with a condition checking if weather equals 'rainy'.

4

Add the v-else condition for unknown weather

Add a final <p> tag below the others that uses v-else to show the text 'Weather is unknown.' for all other cases.

Vue

   20">It is sunny and warm!
  It is rainy today.
  
  



import { ref } from 'vue'

const weather = ref('sunny')
const temperature = ref(25)

Need a hint?

Use v-else without a condition to catch all other cases.