Vue V-for嵌套循环数组

首先写个循环数组V-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>

这样一个嵌套循环数组就好了。