本頁只練什麼
能以三個真實輸入事件分辨 trim、number 與 lazy 的轉換/更新時機。
表單 DOM value 預設是字串且 input 每次輸入都觸發；未選 modifier 會留下空白、錯誤型別或過早更新。
要修改的檔案：files/starter/index.html
定位：同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。｜依 starter-1 定位，只修改「v-model.trim／.number／.lazy」的責任。
LESSON-22 · TOPIC 01
v-model.trim／.number／.lazy
能以三個真實輸入事件分辨 trim、number 與 lazy 的轉換/更新時機。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
金額 2 與 3 相加顯示 23，備註每打一字就觸發儲存。
起始狀態：name 有空白、amount=0、note=初始。
完成後要看到
trimmed=David、numberValue=42、numberType=number、lazyBefore=初始、lazyAfter=完成。
驗收證據：trimmed=David、numberType=number、lazyBefore=初始、lazyAfter=完成
何時會用到
姓名不保留頭尾空白、數量需數值運算、欄位只在完成編輯後提交狀態時。
常見混淆：.number 無法保證任何文字都變 number；無法 parse 時可能保留原字串。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
v-model.trim／.number／.lazy v-model trim, number, and lazy modifiers
trim 去掉頭尾空白；number 把可轉的文字變數字；lazy 等 change 才收件。
正式說法：v-model modifiers transform assignment or switch the listener from input to change for native form controls。
v-model.trim='name'、v-model.number='amount'、v-model.lazy='note'。三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/index.html定位：同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/index.html定位：同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。要做：對三欄派送對應事件，記錄 trim/number/lazy 在 input 與 change 前後的值。
預期：trimmed=David、numberValue=42、numberType=number、lazyBefore=初始、lazyAfter=完成。
證據：trimmed=David、numberType=number、lazyBefore=初始、lazyAfter=完成
卡住先查：同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/index.html定位：同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：trimmed=David、numberValue=42、numberType=number、lazyBefore=初始、lazyAfter=完成。
證據：trimmed=David、numberType=number、lazyBefore=初始、lazyAfter=完成
卡住先查：同時記錄 DOM input.value、反應式值與 typeof，不只看畫面。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
v-model.trim／.number／.lazyruntime fixture · read-only demo
本主題示範畫面：
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
每個 modifier 只驗一個責任。
提示 2｜關鍵片段
trim/number 派 input；lazy 先派 input 讀 before，再派 change 讀 after。
提示 3｜完整解答與原因
完整解答與原因：trim 欄輸入含空白後模型為 David；number 欄模型為 number 42；lazy 在 input 後仍是初始，change 後才變完成。