在vue项目开发过程中，如果一个数据是一个数组，我们要想让这个数组内的所有元素都能在前台页面中展示出来，我们就必须循环这个数组。vue就提供了这样一个循环指令——v-for指令，通过v-for指令，我们要以将一个数据数组循环输出。下面，一起来看看这个v-for指令的用法。
案例数组：
date(){
return {
list:[
{ title:'gaogao', content:'gaogaogaogagago' },
{ title:'ssmay', content:'ssmay theme' },
{ title:'wanlimm', content:'wanlimm wanlimm wanlimm' }
]
}
}
案例1：直接通过v-for循环出list数组数据。
<div v-for="item in list">
{{item.title}} -- {{item.content}}
</div>
输出结果：
案例2：与v-if指令结合使用。
<div v-for="(item,key) in list" v-if="key==2">
{{item.title}} -- {{item.content}}
</div>
这里的key代码表示每次循环的序列号，从0次开始，key==2，即表示第三次循环，获取的是list数组的第三个元素，即：{ title:'wanlimm', content:'wanlimm wanlimm wanlimm' }，所以，输出结果如下：
wanlimm -- wanlimm wanlimm wanlimm
案例3：结合绑定属性class
<div v-for="(item,key) in list" :class="{red:key==0,blue:key==2}">
{{item.title}} -- {{item.content}}
</div>
添加样式：
<style >
.red{ color:red }
.blue{ color:blue }
</style>
输出结果如下图：
