[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>
```