项目场景:

使用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为取出的索引:matchesenterprisespostsarticles

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐