Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uniapp列表渲染,渲染循环嵌套数组

uniapp列表渲染,渲染循环嵌套数组

作者头像
王小婷
发布于 2025-05-19 10:59:06
发布于 2025-05-19 10:59:06
3900
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>
        <view class="padding-xl" v-for="(item,index) in fenecList.fences" :key="index">
            <text>{{item.name}}</text>
            <!-- 嵌套循环 -->
            <view v-for="itemson in item.tasks">
                <text>{{itemson.name}}</text>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                fenecList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                uni.request({
                    url: "../../static/test.json",
                    method: 'get',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.fenecList = res.data.info;
                    },
                });
            },
        },
    }
</script>
<style>
</style>

json数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "retCode": 1,   
    "info": {
        "id": 1, 
        "configName": "家庭作业",       
        "fences": [{
            "id": 1,
            "name": "测试区域一", 
            "tasks": [{
                "id": 1,
                "name": "测试办公室位置" 
            },{
                "id": 2, 
                "name": "测试会议的位置" 
            },{
                "id": 3, 
                "name": "测试办公室位置" 
            }]
        },{
            "id": 2, 
            "name": "测试区域二", 
            "tasks": [{
                "id": 1,
                "name": "查看饮水机" 
            },{
                "id": 2, 
                "name": "查看电脑的" 
            },{
                "id": 3, 
                "name": "查看空调" 
            }]
        }]
    }
}

渲染数据

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uniapp带参数跳转,新页面接收参数
1:index.vue的页面,在按钮上绑定点击事件,将所要传递的参数放在点击事件的方法里面。
王小婷
2020/07/01
11.4K0
uniapp带参数跳转,新页面接收参数
uniapp格式化渲染性别,状态,等级
前后端交互的时候,后端经常会返回一些int类型的返回值,这个时候前端需要对这种数据类型进行一些处理,渲染在界面上。
王小婷
2020/07/01
6270
uniapp格式化渲染性别,状态,等级
uniapp根据不同的状态渲染不同的标签
<view class="text-grey text-xs"> <button v-if="item.isLeave === 0">离厂解绑</button> <span v-else > {{item.leaveTime | formatDate }} </span> </view> json数据 { "msg": "查询成功", "total": 15, "c
王小婷
2021/07/08
1.7K0
uni-app学习笔记-uni.request请求和渲染页面(九)
前端最主要的还是将数据从后端请求过来,对数据进行处理,并且渲染在界面, 前面讲到了uni-app请求接口跨域问题https://www.jianshu.com/p/aea58ee405b8,自己写完json就放在了自己的服务器上了,日常就是对自己写的json的一些请求玩耍~
王小婷
2020/12/01
1.9K0
uni-app请求接口跨域
服务器json数据:http://www.xxx.com/test.json(个人域名不方便展示,用xxx代替隐藏) 数据是这样的,直接可以在浏览器访问到。
王小婷
2021/07/08
4.9K0
uni-app里面使用uni.request请求并且渲染列表
1:新建一个uniapp项目,命名为test。 2:官方网站找文档,要用到列表组件 地址导航:https://ext.dcloud.net.cn/plugin?id=24 导入到自己的test项目里
王小婷
2020/07/10
2.3K0
uni-app请求新闻接口api,渲染新闻列表
在网上找了一个免费的新闻api http://v.juhe.cn/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fcdf5 但是一般免费
王小婷
2020/12/01
2.4K0
新建一个uniapp请求,并且封装request
定义域名:baseUrl; 定义方法:api; 通过promise异步请求,最后导出方法。
王小婷
2022/06/12
3.7K1
新建一个uniapp请求,并且封装request
uniapp时间戳转换成年月日时分秒的格式
后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面 由于uniapp是基于vue的,所以对于时间的处理。我们也可以用到 过滤器。
王小婷
2020/06/22
6.9K1
uniapp存放json格式的数据
在做前端开发的时候,少不了要用一些模拟的json的数据来进行测试,在没有拿到后端开发小伙伴的接口之前,就先尝试着自己写一下json数据吧,前面有说过,使用mock的方法来实现,有小伙伴可能不太习惯,那么json存放的文件夹以及在组件里面要用到的路径一定要注意哦。
王小婷
2020/06/18
2.6K0
uniapp存放json格式的数据
uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法 https://www.jianshu.com/p/bc62c9e1beed
王小婷
2020/07/10
5.1K0
uni-app渲染商品列表
<template> <view class="page"> <view class="uni-product-list"> <view class="uni-product" v-for="(item,index) in productList" :key="index"> <view class="image-view"> <image v-if="renderImage" class
王小婷
2019/12/24
2.8K1
uni-app渲染商品列表
Vue+koa2开发一款全栈小程序(8.图书列表页)
在src/components/BookList.vue中给row加上text-primary类
玩蛇的胖纸
2018/10/25
1.3K1
Vue+koa2开发一款全栈小程序(8.图书列表页)
在uni-app项目里使用node服务实现模拟接口
在uniapp的项目里面,怎么写入模拟接口数据?现在使用node服务实现几个模拟接口,当然是用mock也是可以的哦,方法有很多种,目的只有一个,就是能够娴熟的应用在项目场景里面。
王小婷
2019/12/16
2.2K0
在uni-app项目里使用node服务实现模拟接口
uniapp封装request请求
定义域名:baseUrl; 定义方法:api; 通过promise异步请求,最后导出方法。
王小婷
2021/07/01
4.4K0
初学uniapp上手项目
学习一门新的技术,不仅仅是要了解学习该技术的基本知识,更要学会进阶学习,探究其中的价值。掌握一门技术,俗话讲的好,“千学不如一看,千看不如一练”,为此,在掌握一些基本知识之后,上手练习才是熟悉掌握技术的要点。
腿子代码了
2023/10/08
3250
初学uniapp上手项目
uniapp获取接口数据,渲染在picker选择器里面
2:选择一个比较好用的ui框架 引入之后,很多代码样式都不需要自己一点点的写了,需要什么样的,直接在UI库里面复制黏贴就行 ,省了很多时间哦,不许呀考虑写出来的页面样式不好看之类的问题了。
王小婷
2025/05/19
800
uniapp获取接口数据,渲染在picker选择器里面
Uniapp商城项目【详细笔记文档】
1.1 通过hbuilderx编辑器创建一个默认的uni-app项目(如图1——图2)
MIKE笔记
2023/03/23
1.7K0
Uniapp商城项目【详细笔记文档】
uni-app 结合云函数开发小程序博客(三):接入云函数,实现完善的列表刷新机制
因为项目做的是博客demo, 首页进来想给人直观的就能看到文章,看到分类。所以想的一个是可以左右滑动,切换分类,一个是页面以列表形式,直接 list 渲染。类似掘金的样式:
一只图雀
2020/05/20
4.4K0
相关推荐
uniapp带参数跳转,新页面接收参数
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验