2025-01-29-vue3_ref 是什麼
2025-01-29-vue3_ref 是什麼
// weightTrackerApp.vue：體重追蹤器
體重追蹤器
<!-- 輸入表單-->
<form @submit.prevent="addRecord" class="space-y-2 mb-4">
<div>
<label>日期：</label>
<input type="date" v-model="newRecord.date">
</div>
<div>
<label>體重(kg):</label>
<input type="number" v-model.number="newRecord.weight" class="border px-2 py-1" required />
</div>
<button type="submit" class="bg-blue-500 text-white px-4 py-1 rounded">新增</button>
</form>
<!-- 清單-->
<ul class="space-y-2">
<li v-for="(record, index) in sortedRecords" :key="record.id" class="flex justify-between items-center border p-2">
<span>{{ record.date }} - {{ record.weight }}kg</span>
<button @click="deleteRecord(record.id)" class="text-red-500">刪除</button>
</li>
</ul>