Vue-for循环、循环数组

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>

现在需要将上面两行代码放在一个遍历里面去执行，这样的话应该怎么去做呢？
第一种就是在两个div外面包一个div来表示：

<div v-for="(item,idx) in list" :key="idx">
      <div>我是div-1:{{item}}</div>
      <div>我是div-2:{{item}}</div>
</div>

还有一种表达方式是通过template来循环，有点类似小程序中的block

<template v-for="(item) in list">
      <div :key="item+1">我是div-1:{{item}}</div>
      <div :key="item+2">我是div-2:{{item}}</div>
 </template>

两种方式的区别就是div-1和div-2最外层是否会生成一个div元素，第一种方式的dom元素如图：

image.png

使用template的dom元素如图：

image.png

两种方式各有优劣，看各自要求来做处理