记录--vue双重循环

最新推荐文章于 2024-06-28 16:31:39 发布

原创最新推荐文章于 2024-06-28 16:31:39 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

这篇博客探讨了如何在Vue中通过`v-for`指令处理和展示两层嵌套的数据结构。示例展示了如何遍历`items`数组，并分别显示`Name`和其对应的`Items`列表，为每个子项渲染`itemname`属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 items: [
        {
          Name: "进度",
          Items: [
            { itemname: "状态" },
            { itemname: "状态" },
            { itemname: "状态" },
            { itemname: "信息" },
          ],
        },
        {
          Name: "2",
          Items: [
            { itemname: "1" },
            { itemname: "2" },
            { itemname: "2" },
            { itemname: "4" },
          ],
        },
        {
          Name: "3",
          Items: [
            { itemname: "1" },
            { itemname: "2" },
            { itemname: "3" },
            { itemname: "4" },
          ],
        },
      ],
      传递两层数据使用时
             <div v-for="(ite, index) in items" v-bind:key="index" > <span > {{ ite.Name }}</span>
            <ul>
              <li
                v-for="(item, index) in ite.Items" v-bind:key="index" >  
                {{ item.itemname }}