vue开发教程08：v-for指令——循环渲染列表数据

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

在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>

输出结果如下图：