vue如何调用data双重数组的数据(双重for循环)-阿里云开发者社区

vue如何调用data双重数组的数据(双重for循环)

2023-11-27 109

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue如何调用data双重数组的数据(双重for循环)

双重嵌套v-for的简单使用

1.v-for基础语法

v-for在vue的主要使用语法的方式如下：

//js中
data():{
return:{
List:[
{listDataName:1},
{listDataName:2},
{listDataName:3},
{listDataName:4},
]
}
}:

<view v-for="(item,index) in List">{{item.listDataName}}</view>

上面的是遍历data的List数组,item的含义类似于对象,用来调用List的数据,根据.来调用, 如item.listDataName,而这两个的外面需要加两个{{}},index是遍历的下标,如果第一个数组的数据,那么它的索引就是0,索引从0到数组的总长度-1结束,也就是遍历结束时结束.

2 v-for的双重嵌套调用

2.1 嵌套前准备

首先我们要准备一个Data数组，这个数组里面再存放一个数组，以下是data中数据示例

listfather: [{
            name: "小明",
            skills: [{
                sname: "Java",
              },
              {
                sname: "大数据"
              },
            ],
          },
          {
            name: "张三",
            skills: [{
                sname: "C",
              },
              {
                sname: "C++"
              },
            ],
          }
        ],

2.2 双重v-for调用数组数据

首先我们调用name是比较简单的遍历一个v-for循环就可以了，但如果我们遍历skills时就会遇到一些问题，需要写两个v-for，第一个v-for遍历的是我们的数组，第二个v-for遍历的是我们第一个v-for“item对象”的skills子数组，那么这样，就可以实现我们想要的双重循环以达到我们取到skills也就是遍历嵌套数组中的数据效果了。以下有具体界面展示、功能代码、全部代码。主要是以演示为主，所以界面比较“简洁”。

<view v-for="(item,index) in listfather" :key="id">
      {{"姓名:"+item.name+"技能:"}}
      <text v-for="(stu,index) in item.skills" :key="sid">
        {{stu.sname}}
      </text>
    </view>

<template>
  <view>
    <view v-for="(item,index) in listfather" :key="id">
      {{"姓名:"+item.name+"技能:"}}
      <text v-for="(stu,index) in item.skills" :key="sid">
        {{stu.sname}}
      </text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        listfather: [{
            name: "小明",
            skills: [{
                sname: "Java",
              },
              {
                sname: "大数据"
              },
            ],
          },
          {
            name: "张三",
            skills: [{
                sname: "C",
              },
              {
                sname: "C++"
              },
            ],
          }
        ],
      }
    },
    methods: {
    }
  }
</script>