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