2025-02-01- JavaScript 系列八：第5課 ── 體重追蹤應用程式-步驟06
體重追蹤器
<!-- 輸入表單-->
<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 mb-6">
<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>
<!-- 圖表 -->
<canvas ref="chartCanvas" class="w-full h-64"></canvas>
</div>
0%