首页 > 编程语言 > 详细

Vue V-for嵌套循环数组

时间:2020-04-12 01:16:23      阅读:231      评论:0      收藏:0      [点我收藏+]
<div v-for="item in items" :key="item.id" :value=‘item.value‘ :label="item.label">

   <div>{{item.name}}</div>

</div>

<script>

items:[

    {id:1,name:"可乐"},

    {id:2,name:"雪碧"},

    {id:3,name:"橙子"},

]

</script>
<div v-for="item in items" :key="item.id" :value=‘item.value‘ :label="item.label">

   <div>{{item.name}}</div>

     <div v-for="arry in item.itemse" :key="arry.id" :value=‘item.value‘ :label="item.label">  

        <div>{{arry.text}}</div>

      </div>

</div>

<script>

items: [

  {

                id: 1,

                name: "可乐",

                itemse: [{ id: 4, text: "冷冻可乐" }, { id: 5, text: "香草可乐" }]

   },

   {

               id: 2,

               name: "雪碧",

               itemse: [{ id: 6, text: "冷冻雪碧" }, { id: 7, text: "青柠雪碧" }]

  },

  {

                 id: 3,

                 name: "橙子",

                 itemse: [{ id:8, text: "冷冻橙子" }, { id: 9, text: "新鲜橙子" }]

   }

]

</script>

 

Vue V-for嵌套循环数组

原文:https://www.cnblogs.com/gxywb/p/12683361.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!