项目场景：

使用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>