VUE中v-for循环

v-for的使用

• 当我们需要对一组数据循环的时候，可以用到它。

v-for循环

• 格式：  

  v-for="(item, index) in items"

  格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index 
• 例子：

<ul v-for="(item,index) in user">
 <li>{{item.name}}</li>
 <li>{{item.age}}</li>
 <li>{{item.sex}}</li>
</ul>

data(){
   return {
    user:[
     {
      name:'王',
      age:'18',
      sex:'男',
     },
     {
      name:'张',
      age:'22',
      sex:'女',
     }
    ]
   }
  }

注意：在循环主体中，item指的就是循环中的元素本身，在本例中就是指user中的每个对象。而index则是元素的索引值，也就是本例中的对象在user数组中所占的下标。

• 显示结果：

王
18
男
张
22
女

通过事件获取循环中的index。

<ul v-for="(item,index) in user">
 <li @click='getIndex(index)'>{{item.name}}</li>
 <li>{{item.age}}</li>
 <li>{{item.sex}}</li>
</ul>


getIndex(index){
 console.log(index);
}