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>

vue——双层循环嵌套相关推荐

双层循环嵌套打印矩形 java
双层循环嵌套打印矩形 java public class testone {public static void main(String[] args) {// 打印多行内容假设打印line_num ...
0829双层循环嵌套
0829双层循环嵌套案例录入并获取一个班级的平均分_pyhui的技术博客-CSDN博客 https://blog.csdn.net/ifubing/article/details/10821279 ...
java 双重for循环_Java--for循环之双层循环嵌套执行流程
for循环单层循环执行流程:http://blog.csdn.net/asheandwine/article/details/76383304 接下来看双层循环: 循环嵌套是指在一个循环语句中再定义一 ...
Java--for循环之双层循环嵌套执行流程
for循环单层循环执行流程:http://blog.csdn.net/asheandwine/article/details/76383304 接下来看双层循环: 循环嵌套是指在一个循环语句中再定义一 ...
c语言微课ppt嵌套函数,C语言课程中循环嵌套的微课教学设计与思考
C语言课程中循环嵌套的微课教学设计与思考 2018-12-01 话题:教育学习,教学方法摘要本文以C语言课程中循环嵌套内容为例,通过观看全国高校微课比赛获奖作品与专家点评得到启示,本科与高职的微 ...
循环嵌套思路详解 | 一个“在盒子里过家家”的算法－－以冒泡排序与打印菱形为例
目录前言一.引例 -- 菱形打印 1. 题干要求 2. 如何阅读循环结构? 二."在盒子里过家家"的理解思路 1. 什么叫"在盒子里过家家"? 一个小例子 ...
java for嵌套for循环语句_java中的for循环嵌套语句怎么执行？
展开全部控制语句--for:语句的嵌套应用:累加求和,计数器:循环嵌套. 一.语62616964757a686964616fe58685e5aeb931333365646232句的嵌套应用语句嵌套 ...
python 循环（while、for、break、continue、循环嵌套、while...else、for...else）
1. 循环作用循环的作⽤:让代码更⾼效的重复执⾏. 在Python中,循环分为 while 和 for 两种,最终实现效果相同. 2. while的语法 while ...
python新手任务：python循环嵌套
2019独角兽企业重金招聘Python工程师标准>>> Python 循环嵌套 Python 语言允许在一个循环体里面嵌入另一个循环. Python for 循环嵌套语法: Pyth ...

vue——双层循环嵌套

vue——双层循环嵌套相关推荐

最新文章

热门文章