ネストされたループ配列のVue V

<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> 

アイテム:[ 

  { 

                id:1、

                name: "可乐"、

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

   }、

   { 

               id:2、

               name: "雪碧"、

               itemse:[{id:6、text: "Frozen Sprite"}、{id:7、text: "Lime Sprite"}] 

  }、

  { 

                 id:3、

                 名前:「オレンジ」、

                 アイテムe:[{id:8、text: "Frozen Orange"}、{id:9、text: "Fresh Orange"}] 

   } 

] 

</ script>

 

おすすめ

転載: www.cnblogs.com/gxywb/p/12683361.html