Project 24: Calendar UI
Vue Engineer
Component Task
Objective
Review day: combine v-for and class binding — days 8 and 4 — to highlight one day among many.
You're building a calendar strip.
Task: render a days ref (1 through 7) with v-for, applying a today class to whichever one matches a fixed today value.
Component.vue
<script setup>
import { ref } from 'vue';
const days = ref([1, 2, 3, 4, 5, 6, 7]);
const today = 4;
</script>
<template>
<span v-for="day in days" :key="day" :class="{ today: day === today }">
{{ day }}
</span>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result