- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
在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>
输出结果如下图:
v-for确实需要好好学习一下。