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

最新推荐文章于 2024-05-15 20:23:54 发布

茶憶

最新推荐文章于 2024-05-15 20:23:54 发布

阅读量1.4k

点赞数 5

分类专栏： JavaScript Vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44711440/article/details/109367041

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue中遍历maintainCarList数组，分别显示'今日'和'昨日'的车辆信息。通过两次v-for循环，首先遍历时间分类，然后遍历carInfo数组，展示每条数据的时间、车牌号、车型号和费用。示例代码包含HTML结构和Vue的绑定语法，用于在前端页面上渲染数据。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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>