实现v-for循环嵌套

最新推荐文章于 2022-04-12 23:34:08 发布
最新推荐文章于 2022-04-12 23:34:08 发布
阅读量5.2k 收藏 4
点赞数 6
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingyue0126/article/details/116025105
版权

实现v-for循环嵌套

首先要明白其中的逻辑关系，笔者本次项目中使用的是双层列表嵌套，通过关联这两层进行数据传输。首先通过v-for传入数据，实现外层元素循环，然后再通过内外侧关联，将内层数据传到对应的外层进行循环渲染。

在这里插入图片描述

1、对外层标签使用v-for进行数据绑定，循环渲染数据

给外层标签使用v-for进行数据绑定，然后在对应标签用mastache（双大括号）传值
在这里插入图片描述

2、给内层数据做同样处理，v-for绑定进行数据循环渲染，双大括号在对应的标签内插值

注意：在对第二层数据使用v-for的时候命名要与外层关联，达到数据关联传输的目的，在下面写入数据的时候也要在对应的地方进行嵌套，具体见截图
在这里插入图片描述

写在最后：本人小菜鸡一枚，博客是为了记录工作遇到的问题及解决方法，有错误之处，还望各位大佬多多包涵，帮忙纠正~

冰月0126
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
v-for循环嵌套
HuLuWa1997的博客
08-04 1262
html代码： <div class="cardWrap marginBottom"> <div v-for="(item, index) in catalogList" :key="index" class="cardItem" > <div class="labelTitle"> <i class="icon"></
2021-07-31 v-for实现多层嵌套遍历(二维数组的遍历)以及遍历数组与对象的用法
GAARA
07-31 3913
1.v-for实现多层嵌套遍历 代码 <div id="app"> <div v-for="(item,index) in person"> 我叫{{item.name}},我每天上午: <!-- 注:item.daily是把item取出来给第二层用 --> <div v-for="(items,indexs) in item.daily"> {{items.am}}
v-for里面再嵌套一个v-for的写法
青烟小生的博客
07-20 7482
v-for里面再嵌套一个v-for的写法 list:[ id:'', goods:[ images:'', product:'', desc:'' ] ] <div class="listContent" v-for="item in list" :key="item.id"> <span>{{item.create_time_i | formatDate}}</span> <div class=" van-hair
Vue中使用v-for实现一对多数据的2层和3层嵌套循环
BADAO_LIUMANG_QIZHI的博客
08-18 6667
场景 业务场景中常有一对多的情况。 后端在给前端返回数据时是一个对象的list，为每个对象的有一个属性 是多的那个的对象的list。 比如后台给前端返回的数据示例如下 那么在Vue中怎样将这个一对多的数据循环都显示出来。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 实现两层循环嵌套 <div v-for="(item,index) i...
vue v-for循环嵌套
qq_38596005的博客
01-03 3027
vue v-for循环嵌套 之前在写v-for嵌套的时候还不够了解v-for，现在有一定的了解 数据结构如下： 其中的name和value会在后面赋值，这里就不贴过程了，知道数据的格式就行了 展示效果： 具体的代码如下 <div class="flexRow" v-if="data.length>0"> <div class="total" v-...
vue中v-for嵌套循环
热门推荐
likeuyq的博客
04-08 2万+
vue中对于层级比较多的数据结构可能会使用到v-for的嵌套循环,话不多说,上代码.
v-for的嵌套循环使用【uniapp】
qq_54568336的博客
04-12 4258
<template> <view class="" > <view class="content" v-for="(item,index) in qqcy"> <view class="box" @tap="skillIdx=index"> 门派：{{ item.address }} 代表：{{ item.represent }} </view> <!-- 要展示的列表 item.member是根据上一层的.
vue2.0使用v-for循环制作多级嵌套菜单栏
12-29
使用v-for循环生成一个多级嵌套菜单栏，只要你学会了这个方法，几乎所有的菜单栏都可以实现了。 方法 <div class=level-one v-if=obj.level v-for=obj><a>{{obj.title}} <div class=level-two v-if=obj1.parentId ...
Vue中v-for的数据分组实例
08-27
Vue中v-for的数据分组实例 在Vue中，实现数据的绑定和更新是一件很...本实例展示了如何使用Vue的computed特性来实现数据的分组，并使用嵌套的v-for循环来绑定数据。这种方法非常实用，可以应用于各种数据展示的场景。
python嵌套字典比较值与取值的实现示例
01-20
前言 本文通过示例给大家介绍了python嵌套字典比较值，取值，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 示例代码 #取值import types allGuests = {'Alice': {'apples':... for k,v in dict1.
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
12-29
如下所示： specifications:[ { specificationName:颜色, specificationItem:[ {value:黄色}, {value:黑色} ] } ] 排序 规格项 操作
Element实现表格嵌套、多个表格共用一个表头的方法
10-15
总结来说，实现表格嵌套和共用表头的关键在于巧妙地使用`v-for`循环、条件判断、`slot-scope`以及`span-method`属性。同时，对Element UI组件的样式进行适当的调整也是必不可少的。通过这样的方式，我们可以创建出...
【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx
12-27
antd+vue实现动态验证循环...一个是可动态添加的循环表单form，另一个为普通表单dateForm　html　　<a-form :form="form" @keyup.enter.native='searchQuery'>　　 <div class="dynamic-wrap">　<div v-for="(item,
Vue v-for嵌套循环
小小鸭脖的博客
10-10 4474
&lt;div v-for="data in list"&gt; &lt;div v-for="detail in data.details"&gt; &lt;/div&gt; &lt;/div&gt; 可以使用嵌套，但是有一个条件，details 必须要是list子项里面的一个属性。...
vue.js 数据循环数据v-for及v-for的数据嵌套循环
qq_38528283的博客
09-27 4708
vue.js 数据循环数据v-for及v-for的数据嵌套循环 在js中自定义一个json &amp;lt;script&amp;gt; export default { data () { return { //自定义循环数据 parameters: [ { ...
vue v-for循环嵌套的探索（二）
ColourfulTiger的博客
08-05 1万+
使用v-for循环的目的就是为了处理大量类型重复的数据，归根结底是一种有规律的数据，但是有些规律却不是那么容易的，很多时候，我们会使用到循环，甚至多重循环的嵌套，不同的循环嵌套对应着不同的json数据的结构，本篇主要讲述的是使用v-for循环解决部分同，部分不同的情况，主要是针对表格table来使用的。 模拟的json数据如下： { "name":"小王", "age":20, "ph...
vue v-for嵌套
xiaojun201593的博客
08-19 2200
vue v-for循环嵌套 <div v-for="goods_list in goods_lists"> <div v-for="good in goods_list.goods"> <img class="menu_goods_img" :src="good.src"> <div> ...
vue v-for 的多重嵌套
杨长文的博客
02-02 5197
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>vue的多重嵌套&lt...
uniapp v-for循环固定次数
最新发布
07-27
引用\[1\]:根据提供的代码，问题是在使用uniapp的v-for循环时，循环次数固定的问题。解决方法是在循环外套一个空的元素，如下所示： ```html <view class=""> <!-- 为了兼容小程序 包一个外壳 --> <list-card :item="item" v-for="item in list" :key="item._id"></list-card> </view> ``` 这样做可以解决循环次数固定的问题。\[1\] 引用\[2\]:另外，根据提供的代码，还有一个关于字体大小适配的问题。在main.js中配置了一个函数sizeFun()，用于根据屏幕宽度进行字体大小的适配。该函数会根据当前屏幕宽度与预设屏幕宽度进行比较，并返回一个缩放比例。然后将该函数配置到全局，方便在整个项目中使用。\[2\] 引用\[3\]:最后，关于uniapp项目的发行打包问题，可以按照以下步骤进行操作：首先，在manifest.json文件中设置uni-app应用标识。然后，在H5配置中选择路由模式为线上history，并保持其他配置为默认值。最后，点击发行，成功后可以查看dist文件夹中生成的文件。对于微信小程序的打包，可以按照uniapp的官方文档进行操作。\[3\] 综上所述，根据提供的代码和问题描述，可以解决uniapp v-for循环固定次数的问题，并提供了关于字体大小适配和项目打包的相关信息。 #### 引用[.reference_title] - *1* *3* [【UNI-APP】新闻资讯APP总结](https://blog.csdn.net/qq_41863447/article/details/123378631)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp宽屏开发PC端方案，及衍生问题解决](https://blog.csdn.net/F2691898750/article/details/129019396)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值