上QQ阅读APP看书，第一时间看更新
4.2.2 列表渲染
列表渲染：用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要采用item in items形式的特殊语法，其中items是源数据数组且是数组元素迭代的别名。
代码如下：
<div class="app">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
<script>
data:{
items:[
{text:"name"},
{text:"age"},
{text:"like"}
]
}
</script>
渲染结果如下所示。
<div class="exp">
<ul>
<li>name</li>
<li>age</li>
<li>like</li>
</ul>
</div>
v-for还支持一个可选的第二个参数为当前项的索引。代码如下：
<div class="exp">
<ul>
<li v-for="item,index in items">{{index}}-{{item.text}}</li>
</ul>
</div>
<script>
var exp=new Vue({
el:".exp",
data:{
items:[
{text:'name'},
{text:'age'},
{text:'like'}
]
}
})
</script>
运行的效果如图4-10所示。
图4-10 v-for运行效果图（一）
可以使用v-for通过一个对象的属性来迭代。代码如下：
<div class="app">
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:".app",
data:{
obj:{
firstname:"欧阳",
lastname:"静静",
age:18
}
}
})
</script>
运行的效果如图4-11所示。
图4-11 v-for运行效果图（二）
当v-for与v-if一起使用时，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中。为某些项目渲染节点时，运用v-for与v-if较多。代码如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
而如果想要有条件地跳过循环执行，那么可以将v-if置于外层元素（或<template>）上。代码如下：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos!</p>
在Vue 2.2.0以上的版本中，如果要在组件中使用v-for，必须使用key。代码如下：
<my-component v-for="(item,index) in itmes" v-bind:key="index"></my-component>
虽然在自定义组件中可以使用v-for，但是，v-for不能自动传递数据到组件中，因为组件有自己独立的作用域。为了传递迭代数据到组件中，需要使用props。代码如下：
下面用详细的代码介绍列表渲染。
Vue的列表渲染其实就是通过指令v-for将一组数据渲染到页面中，这一组数据可以是数组，抑或是对象。