Vue v-for双层遍历循环，商品列表分类显示，获取的是json数据

maintainCarList:[
{
    
    
     timeTit:'今日',
     carInfo:[
         {
    
    
             icon:'img-cl',
             time:'07-10 18:03:07',
             carNum:'沪A E1E1E1',
             carName:'北京奔驰-E300 2018款 2.0T 手自一体 运动版',
             carFee:'¥89.00'
         },
         {
    
    
             icon:'img-cl',
             time:'07-11 18:03:07',
             carNum:'沪A E1E1E1',
             carName:'北京奔驰-E300 2018款 2.0T 手自一体 运动版',
             carFee:'¥89.00'
         }
     ]
 },
 {
    
    
     timeTit:'昨日',
     carInfo:[
         {
    
    
             icon:'img-cl',
             time:'07-12 18:03:07',
             carNum:'沪A E1E1E1',
             carName:'北京奔驰-E300 2018款 2.0T 手自一体 运动版',
             carFee:'¥89.00'
         },
         {
    
    
             icon:'img-cl',
             time:'07-13 18:03:07',
             carNum:'沪A E1E1E1',
             carName:'北京奔驰-E300 2018款 2.0T 手自一体 运动版',
             carFee:'¥89.00'
         }
     ]
 }
]

1、遍历 maintainCarList数组

<li class="maintainCarToday" v-for="(items,index) in maintainCarList" :key='index'>

这里就可以把“今日”和“昨日”两个分类显示出来了

<span class="timeTit">{
   
   {items.timeTit}}</span>

2、再次遍历，遍历carInfo数组

<van-grid-item v-for="(item,index) in items.carInfo" :key="index">

这里可以把carInfo数组内的数据获取到了，显示产品的时间，牌号，型号，费用

<!-- 显示时间 -->
<div class="time">{
   
   {item.time}}</div>
<!-- 车牌号 -->
<div class="carNum">{
   
   {item.carNum}}</div>   
<!-- 车型号 -->
<div class="carName">{
   
   {item.carName}}</div>
<!-- 费用 -->
<div class="carFee"><span>{
   
   {item.carFee}}</span></div>

下面是HTML代码：

<div class="maintainCar">
  <ul>
       <li class="maintainCarToday" v-for="(items,index) in maintainCarList" :key='index'>
           <span class="timeTit">{
   
   {items.timeTit}}</span>
           <van-grid :border="false" :column-num="1" :gutter="20">
               <van-grid-item v-for="(item,index) in items.carInfo" :key="index">
                   <div class="maintainCarBox">
                       <img class="icon" :src="require(`../assets/${item.icon}@2x.png`)">
                       <div class="maintainCarCon">
                          	<!-- 显示时间 -->
                         	<div class="time">{
   
   {item.time}}</div>
                         	<!-- 车牌号 -->
                         	<div class="carNum">{
   
   {item.carNum}}</div>   
                         	<!-- 车型号 -->
                         	<div class="carName">{
   
   {item.carName}}</div>
                         	<!-- 费用 -->
                         	<div class="carFee"><span>{
   
   {item.carFee}}</span></div>
                       </div>
                   </div>
               </van-grid-item>
           </van-grid>
       </li>
   </ul>
</div>

如有错误或不足，欢迎各位大佬评论指正。