## 列表渲染
### ` v-for`指令
我們用 `v-for` 指令根據一組數組的選項列表進行渲染。`v-for` 指令需要使用` item in items` 形式的特殊語法，`items` 是源數據數組并且 `item` 是數組元素迭代的別名。
~~~html
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in items">
{{item}}+{{index}}
</li>
</ul>
~~~
~~~javascript
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
items: [
"小米mix2","iphone8 plus","三星S9 plus","iphone X"
]
}
}
}
~~~
> 你也可以用 v-for 通過一個對象的屬性來迭代。
~~~html
<ul>
<li v-for="(phone,index) in phones">
<p>{{phone.name}}</p>
<p>{{phone.price}}</p>
<hr />
</li>
</ul>
~~~
~~~javascript
phones:[
{
name:"小米mix2",
price:"3999"
},
{
name:"iphone8 plus",
price:"6999"
},
{
name:"三星S9 plus",
price:"7499"
},
{
name:"iphone X",
price:"9999"
},
]
~~~
