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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM