Vue中蚀腿，數組遍歷和其他語言語法類似嘴瓤，比如有一個數組：
list=['a','b','c','d']
現在要遍歷這個數組，并顯示其中的元素和對應的下標莉钙，代碼如下：
<ul>
<li v-for="(item,idx) in list" :key="idx">{{item}},{{idx}}</li>
</ul>
顯示的結果為：
image.png
現在有另外一個需求廓脆，見下面代碼
<div v-for="(item,idx) in list" :key="idx">我是div-1:{{item}}</div>
<div v-for="(item,idx) in list" :key="idx">我是div-2:{{item}}</div>
現在需要將上面兩行代碼放在一個遍歷里面去執(zhí)行，這樣的話應該怎么去做呢磁玉？
第一種就是在兩個div外面包一個div來表示：
<div v-for="(item,idx) in list" :key="idx">
<div>我是div-1:{{item}}</div>
<div>我是div-2:{{item}}</div>
</div>
還有一種表達方式是通過template來循環(huán)停忿，有點類似小程序中的block
<template v-for="(item) in list">
<div :key="item+1">我是div-1:{{item}}</div>
<div :key="item+2">我是div-2:{{item}}</div>
</template>
兩種方式的區(qū)別就是div-1和div-2最外層是否會生成一個div元素，第一種方式的dom元素如圖：
image.png
使用template的dom元素如圖：
image.png
兩種方式各有優(yōu)劣蚊伞，看各自要求來做處理
