VUE指令-列表渲染v-for
v-for
指令根據一組數組的選項列表進行渲染。v-for
指令需要使用 item in items
形式的特殊語法,items
是源數據數組並且 item
是數組元素叠代的別名。
v-for="item in items"
<!-- 格式v-for="item in items" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(默認方式)</div> <hr /> <div> <div style="font-size: 20px;" v-for="item in items"> Name:{{item.name}} </div> </div> </div> |
v-for="(item,index) in items"
<!-- 格式v-for="(item,index) in items" --> <!-- 數組只有兩個參數(item,index) --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-for指令示例(item,index))</div> <hr /> <div> <div style="font-size: 20px;" v-for="(item,key,index) in items"> Name:{{item.name}} + Key:{{key}} + Index:{{index}} </div> </div> </div> |
v-for="(value,key,index) in items" 對象叠代
<!-- 格式v-for="(value,key,index) in items" --> <!-- 對象叠代可以有三個參數(value,key,index) --> <div style="height: 200px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(value,key,index)</div> <hr /> <div> <div style="font-size: 20px;" v-for="(value,key,index) in obj"> Name:{{value}} + Key:{{key}} + Index:{{index}} </div> </div> </div> |
也可以用 of
替代 in
作為分隔符,因為它是最接近 JavaScript 叠代器的語法。
// TODO
key
當 Vue.js 用 v-for
正在更新已渲染過的元素列表時,它默認用“就地復用”策略。如果數據項的順序被改變,Vue 將不會移動 DOM 元素來匹配數據項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index"
。
這個默認的模式是高效的,但是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如:表單輸入值) 的列表渲染輸出。
為了給 Vue 一個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供一個唯一 key
屬性。理想的 key
值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的 track-by
,但它的工作方式類似於一個屬性,所以你需要用 v-bind
來綁定動態值 (在這裏使用簡寫):
<div v-for="item in items" :key="item.id"> |
建議盡可能在使用 v-for
時提供 key
,除非遍歷輸出的 DOM 內容非常簡單,或者是刻意依賴默認行為以獲取性能上的提升。
因為它是 Vue 識別節點的一個通用機制,key
並不與 v-for
特別關聯,key 還具有其他用途,我們將在後面的指南中看到其他用途。
v-for
with v-if
當它們處於同一節點,v-for
的優先級比 v-if
更高,這意味著 v-if
將分別重復運行於每個 v-for
循環中。當你想為僅有的一些項渲染節點時,這種優先級的機制會十分有用
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script> <title>HelloDemo</title> </head> <body style="height: 100%;"> <style> </style> <!-- VUE指令v-for列表渲染 v-for指令需要使用item in items形式的特殊語法,items是源數據數組並且item是數組元素叠代的別名。 也可以用 of 替代 in 作為分隔符 REF: http://www.runoob.com/vue2/vue-loop.html https://cn.vuejs.org/v2/guide/list.html --> <div id="appVue"> <!-- 格式v-for="(value,key,index) in items" --> <!-- 對象叠代可以有三個參數(value,key,index) --> <div style="height: 200px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(value,key,index)</div> <hr /> <div> <div style="font-size: 20px;" v-for="(value,key,index) in obj"> Name:{{value}} + Key:{{key}} + Index:{{index}} </div> </div> </div> <!-- 格式v-for="(item,index) in items" --> <!-- 數組只有兩個參數(item,index) --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-for指令示例(item,index))</div> <hr /> <div> <div style="font-size: 20px;" v-for="(item,key,index) in items"> Name:{{item.name}} + Key:{{key}} + Index:{{index}} </div> </div> </div> <!-- 格式v-for="item in items" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(默認方式)</div> <hr /> <div> <div style="font-size: 20px;" v-for="item in items"> Name:{{item.name}} </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { items:[{ name:"AAA" },{ name:"BBB" },{ name:"CCC" }], obj:{ prop0:"AAA", prop1:"BBB", prop2:"CCC" } } } ) </script> </body> </html>View Code
REF:
http://www.runoob.com/vue2/vue-loop.html
https://cn.vuejs.org/v2/guide/list.html
VUE指令-列表渲染v-for