[TOC]
## 用法:
> 基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:
> items 是源数据数组并且
> item 是数组元素迭代的别名。
```
<div v-for="item in items">
{{ item.text }}
</div>
```
> v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:
```
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
```
## 例子
```
div id="test">
<ul>
<li v-for="food in foodList">{{food.name}}:${{food.price}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#test",
data:{
// foodList:['苹果','香蕉','梨'],
foodList:[
{
name:'苹果',
price:8
},
{
name:'香蕉',
price:4.5
},
{
name:'梨',
price:6
}
]
}
})
</script>
```