一.用v-for把一個(gè)數(shù)組對(duì)應(yīng)為一組元素
v-for指令需要以item in items形式的特殊語(yǔ)法诸尽,items是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。
重點(diǎn): 在v-for塊中,我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限。v-for還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。
也可以使用 of 替代 in
二. 一個(gè)對(duì)象的v-for屬性迭代
注意: 在遍歷對(duì)象時(shí),是按照object.keys()遍歷的, 但不能保證他的結(jié)果在不同的JavaScript引擎下是一樣的
三. key
當(dāng) Vue.js 用v-for正在更新已渲染過(guò)的元素列表時(shí),它默認(rèn)用“就地復(fù)用”策略鞠鲜。如果數(shù)據(jù)項(xiàng)的順序被改變,Vue 將不是移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序断国, 而是簡(jiǎn)單復(fù)用此處每個(gè)元素贤姆,并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。這個(gè)類(lèi)似 Vue 1.x 的track-by="$index"稳衬。
這個(gè)默認(rèn)的模式是高效的庐氮,但是只適用于不依賴(lài)子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如:表單輸入值) 的列表渲染輸出。
為了給VUE一個(gè)提示,需要給每個(gè)節(jié)點(diǎn)一個(gè)特殊的標(biāo)志, 需要為沒(méi)項(xiàng)提供一個(gè)唯一的key屬性,key類(lèi)似于屬性
,需要用v-bind綁定動(dòng)態(tài)值
盡量使用-for提供的key,,,,,,,,,,,,,,key是VUE識(shí)別節(jié)點(diǎn)的通用機(jī)制