# v-for指令
## 用 v-for 把一个数组对应为一组元素
我们用 `v-for` 指令根据一组数组的选项列表进行渲染。`v-for` 指令需要使用 `item in items` 形式的特殊语法，`items` 是源数据数组并且 `item` 是数组元素迭代的别名。
如果希望使用索引值那么提供了`(item,index) in items`第一项为数组元素的别名，第二项为索引值，不可以交换位置
```html
<div id="app">
<ul>
<li v-for="(people,index) in peoples">{{ index }}------ {{ people }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
peoples: ['小李', '小张', '小秦'],
}
})
</script>
```
## 一个对象的 v-for
你也可以用 v-for 通过一个对象的属性来迭代。
**`value`,`key`,`index` 第一个是对应的值，第二个是属性名称，第三个是索引。**
注意这里面的渲染的结果并不一定会按照对象的属性先后显示。
```
<div id="app">
<p v-for="(value,key,index) in people">
{{key}}---{{value}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
people: {
name: "小李",
age: 18,
sex: "男"
}
}
})
</script>
```
```
0--name---小李
1--age---18
2--sex---男
```
