LESSON-20 · TOPIC 04

v-if／v-show 與穩定 key

能觀察 v-if 移除節點、v-show 保留節點但改 display，並以資料 id 讓重排後輸入值跟隨正確項目。

code-editVue 反應式資料與清單渲染｜v-if／v-show 與穩定 key本頁只練一個責任

本頁只練什麼

能觀察 v-if 移除節點、v-show 保留節點但改 display，並以資料 id 讓重排後輸入值跟隨正確項目。

條件策略選錯會丟失昂貴元件狀態或保留不該互動的內容；index key 會讓重排後 DOM 身份對錯資料。

要修改的檔案：files/starter/index.html

定位：先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。｜依 module-4 定位，只修改「v-if／v-show 與穩定 key」的責任。

任務情境

先結果，再原理；完成後要能說出自己看見的證據。

現在的問題

服務排序後，使用者在 A 輸入的備註跑到 B。

起始狀態：if/show 皆可見，清單 a,b 且各有自己的 input value。

完成後要看到

ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true。

驗收證據：ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true

何時會用到

很少切換或不應存在的內容用 v-if；頻繁切換用 v-show；v-for 使用穩定唯一 id。

常見混淆：hidden attribute 與 v-show 都影響顯示，但 v-show 是 Vue 指令管理 inline display；v-if 則改變節點存在。

觀念與最小範例

這段程式是理解起點，不是要你直接跳過 Starter。

v-if／v-show 與穩定 key Conditional rendering and stable list identity

v-if 會把東西拆掉；v-show 只把它藏起來。key 像資料身分證，重排時不能拿座位號當人名。

正式說法：v-if conditionally mounts/unmounts branch；v-show toggles display；key 為 virtual DOM diff 提供 vnode identity hint。

<p v-if='open'>；<p v-show='open'>；<li v-for='item in items' :key='item.id'>。

三步完成本主題

每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。

Step 1｜先看見目前缺口，不急著貼答案。
檔案：files/starter/index.html　定位：先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。。
Step 2｜只修改本主題的一個責任。
檔案：files/starter/index.html　定位：先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。
要做：掛載後切換 open=false 並反轉清單，讀節點存在、computed display 與 data-id/value 配對。
預期：ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true。
證據：ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true
卡住先查：先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：files/starter/index.html　定位：先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true。
證據：ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true
卡住先查：先分別查 querySelector 是否為 null 與 getComputedStyle(display)，再檢查 key 身份。

觀察示範

這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。

v-if／v-show 與穩定 keyruntime fixture · read-only demo

本主題示範畫面：

IF

SHOW

驗收證據

勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。

我能指出 files/starter/index.html 的目前缺口。
我依 Step 2 只修改本主題責任。
我重新載入並保存了這項證據：ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true

提示 1｜方向

節點存在與看不見是兩種不同證據。

提示 2｜關鍵片段

切 open 後 query v-if/v-show；反轉後逐列比 data-id 與 input.value。

提示 3｜完整解答與原因

完整解答與原因：open=false 時 v-if 節點不存在、v-show 節點仍在但 display:none；清單用 item.id key，反轉後每列輸入仍與同 id 配對。

完成後進入下一階段，或回到入口選下一個 topic。

開始 Starter →回到主題清單