- for循環(huán)
// 數(shù)據(jù)源
dataList: [{sid: "xxx_1", name: 'X'}, {sid: "xxx_2", name: 'Y'}, {sid: "xxx_3", name: 'Z'}]
dataList2: [{sid: "xxx_0", name: '新增數(shù)據(jù)'},{sid: "xxx_1", name: 'X'}, {sid: "xxx_2", name: 'Y'}, {sid: "xxx_3", name: 'Z'}]
v-for 指令需要使用item in items 形式的特殊語(yǔ)法铛铁，其中items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名却妨。
第一個(gè)參數(shù)item 則是被迭代的數(shù)組元素的別名饵逐。
第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引 index彪标，是可選的倍权。
<view v-for="(item, index) in dataList" >
<view>{{item.name}}</view >
</view>
結(jié)果
X
Y
X
當(dāng) Vue 正在更新使用v-for 渲染的元素列表時(shí)，它默認(rèn)使用“就地更新”的策略捞烟。如果數(shù)據(jù)項(xiàng)的順序被改變薄声，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素题画，并且確保它們?cè)诿總€(gè)索引位置正確渲染默辨。
<view v-for="(item,index) in dataList" >
<view>{{item.name}}</view>
<switch></switch>
</view>
顯示效果
X
關(guān)閉
Y
關(guān)閉
Z
關(guān)閉
此時(shí)把Y的switch進(jìn)行打開，顯示效果
X
關(guān)閉
Y
打開
Z
關(guān)閉
隨后更改數(shù)據(jù)源為datList2苍息，顯示效果為
新增數(shù)據(jù)
關(guān)閉
X
打開
Y
關(guān)閉
Z
關(guān)閉
此時(shí)發(fā)現(xiàn)本來(lái)是Y打開缩幸，頂部新增一個(gè)元素后變成是X打開，這就是所謂的就地更新每個(gè)元素竞思，每個(gè)索引位置進(jìn)行正確渲染表谊，而switch是沒有被重新渲染的（因?yàn)閿?shù)據(jù)源沒有控制switch開關(guān)狀態(tài)的保存），所以顯示的位置就不對(duì)了衙四。
如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中铃肯，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如input中的輸入內(nèi)容，switch 的選中狀態(tài)）传蹈，需要使用 :key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符押逼。
<view v-for="(item, index) in dataList" :key="item.sid">
<view>{{item.name}}</view >
<switch></switch>
</view>
重復(fù)如上操作步藕，顯示為正確
新增數(shù)據(jù)
關(guān)閉
X
關(guān)閉
Y
打開
Z
關(guān)閉
如不提供 :key，會(huì)報(bào)一個(gè) warning挑格， 如果明確知道該列表是靜態(tài)咙冗，或者不必關(guān)注其順序，可以選擇忽略漂彤。
#注意#當(dāng)同一個(gè)頁(yè)面同時(shí)存在兩個(gè)或兩個(gè)以上的 v-for 遍歷的時(shí)候雾消，key值不能重復(fù)否則H5報(bào)錯(cuò)
<view v-for="(item,index) in dataList" key="index">
<view>{{item.name}}</view>
</view>
<view v-for="(item, index) in dataList2" :key="item.sid">
<view>{{item.name}}</view >
<switch></switch>
</view>
