vue模拟h5外卖点餐双联列表

   @import "./goodsListNav.scss"; 

css

.goodsListNav{   height: 100%;   width: 100vw;   position: relative;   .left{     position: absolute;     top: 0;     left: 0;     width: 25vw;     height: 100%;     display: flex;     flex-direction: column;     .leftItem{       cursor: pointer;       padding: 10px 0;     }   }   #right{     width: 100vw;     padding-left: 25vw;     height: 100%;     overflow: scroll;     .item{       padding: 10px 0;       .items{         padding: 5px 0       }     }   } }

数据

list: [         {           name: 1,           id: 0,           ItemList: [             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1}           ]         },         {           name: 1,           id: 1,           ItemList: [             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1}           ]         },         {           name: 1,           id: 2,           ItemList: [             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1}           ]         },         {           name: 1,           id: 3,           ItemList: [             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1}           ]         },         {           name: 1,           id: 4,           ItemList: [             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1}           ]         },         {           name: 1,           id: 5,           ItemList: [             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1},             {itemName: 1,age: 1}           ]         }       ]

效果图

自己用vue手撸的一个h5外卖点餐双联列表