<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数据
{ "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": "查看空调" }] }] } }
渲染数据
