码迷,mamicode.com
首页 > 编程语言 > 详细

Vue V-for嵌套循环数组

时间:2020-04-12 08:04:22      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:key   bsp   asc   items   script   highlight   class   label   for   

<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嵌套循环数组

标签:key   bsp   asc   items   script   highlight   class   label   for   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!