项目场景：

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

Vue：获取v-for循环中的数组下标、索引及数据相关推荐

java 字符串下标_Java 获取字符在字符串中出现位置下标索引的方法
1､使用IntStream实现的几种方法 1) IntStream.rangepublic static List getIndexList(String s, char c) { return I ...
Vue 实现图片在循环中默认和选中之间的点击切换
Vue 实现图片在循环中默认和选中之间的点击切换 html <ul style="font-size:20px;"><li:key="lesso ...
微信小程序在for循环中调用wx.request异步请求数据
场景:渲染一个聊天列表,按消息往来时间排序. 在for循环中调用wx.request,开始在把整个for包装成一个Promise,然后发现request就是异步的,多次请求回来的数据在for循环里就出 ...
python中的数组下标
下标为-1 – 下标为-1表示最后一个元素 output = [[1,2,3],[4,5,6],[2, 5, 6]] print(output[-1]) [2, 5, 6]是输出结果冒号的用法 – ...
C#数组程序案例1 把数组中指定的下标索引打印出来
需求: 1.C# 打印数组中下标索引为1.2.10的数组元素的值内容2 这是写在main函数里面的代码,数组代码. Console.WriteLine("*************C# 打印 ...
数组下标索引为什么从0开始
也不是所有的高级程序语言都是如此,比如Python数组下标就支持负数. 原因一:历史原因语言出现顺序从早到晚C.Java.JavaScript. C语言数组下标是从0开始->Java也是-&g ...
c语言怎样给数组元素依次赋值,在第一组数组中给数组a的前10个元素依次赋值为1、2、3、···、10；在第2个循环中使数组变为1...
#include int main() { int i,a[10]; for(i=0;i<10;i++) a[i]=i+1; for(i=0;i<5;i++) a[i+5]=a[i]; f ...
java在循环中删除数组元素,在循环Perl中删除数组中的元素
好吧,这是处理问题的一种方法(在某种程度上我理解你想做什么) . 每当您需要回答有关成员资格的问题时,您可能希望使用哈希值 . use strict; use warnings; my @array1 ...
jquery 获取键值对中最大值_jQuery的AJAX发送数据键值对
在我的aspx页面,我对JS是这样的: -jQuery的AJAX发送数据键值对 $("#btnLoad").click(function() { var dataForAjax = ...

Vue：获取v-for循环中的数组下标、索引及数据

项目场景：

解决方案：

Vue：获取v-for循环中的数组下标、索引及数据相关推荐

最新文章

热门文章