vue for嵌套循环

<template>
  <div>
    <!-- 
      :key="item.id" 显示第几个
      :value="item.value" 显示的值
      :label="item.label" 传给后台的值
     -->
    <div  
      v-for="item in lists" 
      :key="item.id"
      :value="item.value"
      :label="item.label"
    > 
      <div style="color:red">第一层循环：{{item.name}}</div>
      <div 
        v-for="arry in item.subtitle"
        :key="arry.id"
        :value="item.value"
        :label="item.label"
      >
        <div>第二层循环：{{arry.text}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      lists:[
        {
          id:1,
          name:"可乐",
          subtitle:[
            {
              id:4,
              text:"冷冻可乐"
            },
            {
              id:5,
              text:"香草可乐"
            }
          ]
        },{
          id:2,
          name:"雪碧",
          subtitle:[
            {
              id:6,
              text:"冷冻雪碧"
            },{
              id:7,
              text:"青柠雪碧"
            }
          ]
        },{
          id:3,
          name:"橙子",
          subtitle:[
            {
              id:8,
              text:"冷冻橙子"
            },{
              id:9,
              text:"新鲜橙子"
            }
          ]
        }
      ]
    }
  },
  methods:{}
}
</script>

<style scoped lang='less'>
</style>