Project 7: Restaurant Menu
Vue Engineer
Builds on these lessons
Component Task
Objective
v-if only renders an element when its expression is truthy — pair it with v-else for the alternative case. Unlike CSS display: none, the element isn't in the DOM at all when the condition is false.
You're building a restaurant menu's specials banner.
Task: create a hasSpecial ref, and show one message when it's true and a different one when it's false.
Component.vue
<script setup>
import { ref } from 'vue';
const hasSpecial = ref(true);
</script>
<template>
<p v-if="hasSpecial">Today's Special: Grilled Salmon</p>
<p v-else>No specials today</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result