Vue:获取v-for循环中的数组下标、索引及数据
在Vue中使用v-for取出排行榜数据,并根据排行榜的分类显示对应的排行榜内容。
·
项目场景:
使用v-for
取出排行榜数据,并根据排行榜的分类显示对应的排行榜内容:
排行榜的分类及内容数据如下,其中内容数组的元素为列表。
<script>
export default {
data () {
return {
r_tags: ['竞赛', '企业', '岗位', '文章'],
ranks: {
matches: [{rank: 1, title: '竞赛A'}, {rank: 2, title: '竞赛B'}],
enterprises: [{rank: 1, title: '公司A'}, {rank: 2, title: '公司B'}],
posts: [{rank: 1, title: '岗位A'}, {rank: 2, title: '岗位B'}],
articles: [{rank: 1, title: '文章A'}, {rank: 2, title: '文章B'}]
}
}
}
}
</script>
解决方案:
使用三元组(list,index,i)
遍历排行榜内容数组ranks
其中list
为取出列表数据:
[{rank: 1, title: '竞赛A'}, {rank: 2, title: '竞赛B'}]
[{rank: 1, title: '公司A'}, {rank: 2, title: '公司B'}]
…
index
为取出的索引:matches
,enterprises
,posts
,articles
i
为取出的数组下标:0,1,2,3
<el-row :gutter="24">
<!-- 遍历获取所有列表 -->
<el-col :span="6" v-for="(list,index,i) in ranks" :key="list">
<el-card>
<!-- 根据数组下标获取对应的排行榜分类作为列表标题 -->
<span>{{r_tags[i]}}TOP10</span>
<!-- 遍历显示每个列表的内容 -->
<div v-for="listItem in list" :key="listItem">
<div>
<span>{{listItem.rank}}</span>
</div>
<div>
<span>{{listItem.title}}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
或者直接把汉字字符串当作数组的索引
结果是一样的:
<script>
export default {
data () {
return {
ranks: {
'竞赛': [{rank: 1, title: '竞赛A'}, {rank: 2, title: '竞赛B'}],
'企业': [{rank: 1, title: '公司A'}, {rank: 2, title: '公司B'}],
'岗位': [{rank: 1, title: '岗位A'}, {rank: 2, title: '岗位B'}],
'文章': [{rank: 1, title: '文章A'}, {rank: 2, title: '文章B'}]
}
}
}
}
</script>
<el-row :gutter="24">
<!-- 遍历获取所有列表 -->
<el-col :span="6" v-for="(list,index) in ranks" :key="list">
<el-card>
<!-- 取索引作为列表标题 -->
<span>{{index}}TOP10</span>
<!-- 遍历显示每个列表的内容 -->
<div v-for="listItem in list" :key="listItem">
<div>
<span>{{listItem.rank}}</span>
</div>
<div>
<span>{{listItem.title}}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
更多推荐
已为社区贡献5条内容
所有评论(0)