## 列表渲染
### ` 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"
},
]
~~~
