vue——双层循环嵌套
实现的效果为双层嵌套v-for,比如:三个滑动块,每个滑动块有3条数据,如图效果,所以我们需要大循环三次,大循环里面再循环3次呈现数据。这是数据代码// 热门推荐recommend:[{"Items": [{thumb:'images/p1.png',title:'电脑娱乐游戏电',price:'¥5000.00',originalprice:'¥6235.00',url:'http://www.
·
实现的效果为双层嵌套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>
更多推荐
已为社区贡献1条内容
所有评论(0)