iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
0
自我挑戰組

每天來點 Vue.js 吧系列 第 13

v-for 列表渲染

tags: Vuejs

v-for ✐

v-for 指令可以使我們方便的渲染 Array 成為列表,在渲染列表相關的 data 時十分方便,並且 v-for 除了 Array,也支持 ObjectnumberstringIterable 其餘四種值。

Object

v-for 渲染物件時,順序依照 Object.keys() 順序遍歷,在不同的引擎中不保證有一樣的結果,這點需要注意。

v-for 使用上需要注意的細節

v-for 上所渲染的資料若是更動 順序DOM 元素在渲染時,並不會隨 順序 更動,而是就地更新每個元素,這樣的渲染更為高效,但是如同前幾章節所述,在遇到臨時 DOM 狀態如 input value 時,input 不會隨資料更動而被替換:

<form>
  <p v-for="(item, index) in list">
    <label for="item">{{ item }}:</label>
    <input type="text" id="item">
  </p>
</form>

這時候透過給定 key 便可以解決此問題,不建議使用 index 作為 key 值,舉例來說下方範例若是使用 splice 抽換 Array 資料中的某個值為新的值,由於新舊值 index 相同,仍然會有 input 不會隨資料更動而被替換的問題。

<form>
  <p v-for="(item, index) in list" :key="index">
    <label for="item">{{ item }}:</label>
    <input type="text" id="item">
  </p>
</form>

如下方,建議使用唯一的值作為 key 值,但若是渲染的元素很單純,v-for 本身的 就地更新 高效渲染也有其優勢。

<form>
  <p v-for="(item, index) in list" :key="item.id">
    <label for="item">{{ item }}:</label>
    <input type="text" id="item">
  </p>
</form>

以上為此次內容,感謝看到這裡的你,我們明天見。


若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人:每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根,似乎就能茁壯成長 - RM


參考資料:

  1. Vuejs.org 2.x

上一篇
Vue 事件處理
下一篇
Vue 雙向數據綁定的語法糖 v-model ✔︎
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言