1. 在vue中，如果要对vue中的数组或是集合循环赋值显示到界面上可以使用v-for标签

1.1 代码（v-for对数组进行循环赋值）

{{arr}}
<!-- 如果自己手写的话 -->
<ul>
   <li>{{arr[0]}}</li>
   <li>{{arr[1]}}</li>
   <li>{{arr[2]}}</li>
</ul>
<!-- 通过v-for来循环 -->
<hr>
<ul>
   <!-- 含义循环数组，把每一项赋值给item -->
   <li v-for="item in arr">{{item}}</li>
</ul>

<script>
    new Vue({
        el: "#app",
        data: {
                arr: [111,222,333],//数组
              }
       }
    })
</script>

1.2 显示效果

1.3 代码（v-for对象进行循环赋值）

<!-- 循环对象 -->
{{obj}}
<ul>
   <!-- 含义循环对象，把每一项赋值给item -->
   <li v-for="item in obj">{{item}}</li>
</ul>

<script>
    new Vue({
        el: "#app",
        data: {
               obj: {//对象
                      name: "微风",
                      age: 22,
                      sex: "男"
                    }
               }
       }
    })
</script>

1.4 显示效果

2.如果我们想拿到其下标的值或对象的key值，通过如下方式可以拿到每一个的下标值或key值

2.1 代码

<!-- 想知道数组中下标的值 -->
<ul>
   <!-- 含义循环数组，把每一项赋值给item -->
   <!-- index代表的是其下标 -->
   <li v-for="(item,index) in arr">{{index+"->"+item}}</li>
</ul>

<hr>

<!-- 想知道对象的key值 -->
<ul>
   <!-- 含义循环对象，把每一项赋值给item -->
   <li v-for="(item,key) in obj">{{key}}:{{item}}</li>
</ul>

2.2 显示效果