vue——双层循环嵌套

实现的效果为双层嵌套v-for，比如：
三个滑动块，每个滑动块有3条数据，如图效果，所以我们需要大循环三次，大循环里面再循环3次呈现数据。

这是数据代码

// 热门推荐
recommend:[
           {
                 "Items": [
                 {thumb:'images/p1.png',title:'电脑娱乐游戏电',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
                 {thumb:'images/p22.png',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
                 {thumb:'images/p3.png',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
                 ]
             },
          {
               "Items": [
               {thumb:'images/p4.jpg',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
               {thumb:'images/p5.jpg',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
               {thumb:'images/p6.jpg',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'}
               ]
           },
         {
              "Items": [
              {thumb:'images/p1.png',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
              {thumb:'images/p2.png',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'},
              {thumb:'images/p3.png',title:'电脑娱乐游戏电脑娱乐游戏电脑娱乐游戏',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.baodu.com'}
              ]
          },
      ]

这是HTML代码：

<van-swipe class="my-swipe" :autoplay="40000" indicator-color="#f00">
	<!--大循环开始-->
    <van-swipe-item v-for="(i,c) in recommend.slice(0,3)" :key="c">
        <van-grid :border="false" :column-num="3">
        	<!--内部循环开始-->
            <van-grid-item  v-for="(z,x) in i.Items.slice(0,3)" :key="x" :url="z.url">
              <div class="pic">
                  <van-image lazy-load :src="z.thumb">
                      <!-- 加载中提示 -->
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                    <!-- 加载图片失败提示 -->
                    <template v-slot:error></template>
                  </van-image>
              </div>
              <div class="title van-multi-ellipsis--l2">{{z.title}}</div>
              <div class="price">{{z.price}}</div>
              <div class="originalprice">{{z.originalprice}}</div>
            </van-grid-item>
        </van-grid>
    </van-swipe-item>
</van-swipe>