zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    S1 : 函数
    S1 :数组迭代方法
    S1 : 传递参数
    S1:new操作符
    S1:函数上下文
    S1:对象与JSON
    S1:运算符
    S1:变量
    代码规范的读后自己的感悟
    第三周学习总结
  • 原文地址:https://www.cnblogs.com/gxywb/p/12683361.html
Copyright © 2011-2022 走看看