uniapp(vue2)布局遇到双层for循环需要注意的事情有2件

已于 2024-08-21 14:53:11 修改
阅读量148 收藏
点赞数 1
文章标签： uni-app 前端 javascript vue
于 2024-08-21 14:50:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ALiMaMaYang/article/details/141393432
版权

uniapp(vue2)布局遇到双层for循环需要注意的事情有2件

第一,索引index的问题,外层的索引不能和内层的索引名一样,要去区分开,如下:

索引不要一样

第二,如果要给内层控件设置点击或者其他事件,不能直接@click,这里有作用域的问题:

错误示范

错误示范

正确写法

正确写法
记得一定要用箭头函数来绑定事件,这样其作用域是当前,否则就会是外层父控件,会导致,获取的值不对,或者压根获取不到.

魅者无疆_族鹿中原
关注
uni-app v-for 循环（双重循环）
qq_42401674的博客
03-04 1万+
<template> <view> <view v-for="stuObj in student"> 学生姓名: {{stuObj.name}},学生年龄：{{stuObj.age}}</view> <view> 学生技能： <view v-for = "sk in stuObj.skill"> ...
uniapp项目vue2升级vue3
sanmao5862的博客
05-31 5029
看到好多开源项目都升级了vue3，看文章说vue3性能升级很多，而且组合式api很香，遂把最近开发的自助洗车app升级下，在此记录下出现的问题。 uniapp升级vue3官方指南 1.我是先去vue官网看了下vue3的组合式api，有个大概了解，方便升级使用。 2.然后根据uniapp升级vue3官方指南把框架层面的先更改。 3.测试访问没问题后再做代码上的更改。（vue3兼容vue2的代码风格） 把代码风格改为组合式api 简单总结组合式api就是把原有的data，methods等等这些以前分..
uniapp 双重循环并获取外循环的下标
weixin_38946164的博客
10-24 1000
需求：一个主题里面有多张图片，需要多图预览每个主题的图片
关于uniapp小程序端提示v-for 暂不支持循环数据问题的解决方案
cabinx的博客
06-30 8067
关于uniapp小程序端提示v-for 暂不支持循环数据问题解决方案 需求描述: 在uniapp小程序此项目中使用多层for循环时，小程序端提示：uniapp v-for 暂不支持循环数据，以至于获取不到循环的数据。 解决方案: <view v-for="(item,index) in flist" :key="item.id"> <view v-for="item2 in item" @click="navTo(item2.id)" :key="item2.id"&g
uniapp tab切换--双重for循环
微风的博客
12-29 1214
<view class="list"> <!-- 这是tab栏 --> <view class="tab-list"> <view class="venue" v-for="(item,index) in arr" :key="index" :class="isActive==index? 'activeColor':''" @click="btn(index)">{{item.type}}</view> .
uni-app获取后台接口使用v-for双重循环渲染数据H5显示，app端不显示
热门推荐
四夕木木夕木木的博客
09-16 1万+
今天我获取后台接口，因为数据是二维数据，所以渲染到页面上我就使用了双重循环： <block v-for="(item, index) in tableList.data.maps" :key="item.staffId"> <view v-for="(itemList, indexList) in item.prod" :key="indexList"> <vi...
uniapp - 电商优购项目
qq_45585640的博客
10-19 7003
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器！为了方便编写样式（例如：），建议安装 scss/sass 编译 插件。插件下载地址：https://ex
代驾-全部订单-VUE模板 UNIAPP模板 布局、样式、JS分离
04-21
代驾 全部订单 四川省成都市武侯区府城大道西段399号 南城都汇六期(武侯区荟锦路246号附近 订单号 20200414171834319510 ...全部订单-VUE模板-UNIAPP模板 ...VUE模板 UNIAPP模板 布局、样式、JS分离
代驾-我的-会员中心-VUE模板 UNIAPP模板 布局、样式、JS分离
04-22
代驾 我的 会员中心 人工智能吴经理 请绑定手机号 全部订单 进行中 钱包 司机入口 领券中心 联系客服 消息提醒 ...代驾我的-VUE模板-UNIAPP模板 ...VUE模板 UNIAPP模板 布局、样式、JS分离
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离
04-05
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离 加菜 已支付 支付成功,祝您用餐愉快 杯鸭碟头饭 数量:1 ￥2880 共2份小计￥57.60 订单详情-VUE模板-UNIAPP模板 原切片设计文件下载后用UNIAPP切片...
for vue 一行2列_VUE的for循环一行两列
weixin_42549451的博客
12-29 4332
在使用vue的过程中，发现v-for这个指令用来页面循环渲染数据是非常好用的。可以说是最常用的指令之一了。但是某天在实际使用的时候，遇到这样一个需求。我的数据是一个list，但是页面上如果一行就放一个数据，界面效果就很难看。只要放两列就好看很多了。目的很简单，但是在vue中使用v-for指令实现好像并没那么简单。VUE大概是入门难度最低的前端框架了。直接拿官网的demo来看下，加了几个数据。{{t...
uniapp列表渲染，渲染循环嵌套数组
祈澈菇凉
06-29 9412
<template> <view> <view class="padding-xl" v-for="(item,index) in fenecList.fences" :key="index"> <text>{{item.name}}</text> <!-- 嵌...
uni-app中picker下拉列表中遍历双层数组
lhxsirky的博客
07-26 9937
后台数据的结构如下： "productfactors": [ {//产品投保要素 "factortype": "Period",//要素类型 "datatype": "08",//数据类型 "productfactorvalues": [ { //投保要素值列表 "factorvalue": "1Y",//投保要素值计算值 ...
uni-app怎么使用uni-icons
肖肖肖丽珠的博客
09-11 442
然后再页面中引用这个vue的组件并对照着官网把他的type找到就可以了。把这个插件下载下来。我们找到uni_modules。把里面的uni-icons粘贴到自己的项目中。我是放在了我的components下面了。
uni-app获取设备唯一值、静态IP以及公网IP的方法
军魂L
09-12 360
特意在此记录一下，方便以后用得到。
一个简约的uniapp登录界面，基于uniapp+vue3+uview-plus
dekuyu blog
09-11 519
一个简约的uniapp登录界面，基于uniapp+vue3+uview-plus页面主要包括：用户登录，手机验证码登录，用户注册，重置密码等页面登录进去后为空白模板。
uniapp 多个动态表单进行校验
最新发布
m0_65546127的博客
09-14 440
uniapp 多个动态表单进行校验。
详细分析Uniapp中的轮播图基本知识（附Demo）
码农研究僧的博客
09-12 1078
在 uni-app 中， 组件是一个用于轮播图的基础组件，类似于其他前端框架中的 carousel 配合 ，可以实现多个页面、图片或内容的循环切换 uni-swiper-dot 组件用于为轮播图提供分页指示器（即小点） 组件：用于创建轮播图的组件
uniapp vue2
04-09
UniApp是一款基于Vue.js的跨平台开发框架，它可以同时开发iOS、Android、H5等多个平台的应用程序。UniApp使用了Vue.js的语法和组件化开发思想，使得开发者可以用一套代码编写多个平台的应用，大大提高了开发效率。 UniApp的核心是基于Vue.js的组件化开发，开发者可以使用Vue.js的语法进行页面的开发和数据的绑定。同时，UniApp还提供了一些特定平台的API和组件，可以方便地调用原生功能和实现特定平台的交互效果。 UniApp支持使用Vue.js的全套特性，包括响应式数据绑定、组件化开发、路由管理、状态管理等。开发者可以使用Vue.js的生态系统中的插件和工具来辅助开发，如Vuex、Vue Router等。 UniApp还提供了一套丰富的UI组件库，可以快速构建各种样式的界面。同时，UniApp还支持使用原生小程序组件和自定义组件，可以满足更复杂的界面需求。 总结一下，UniApp是一款基于Vue.js的跨平台开发框架，它可以帮助开发者用一套代码编写多个平台的应用程序，提高开发效率和代码复用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值