前端数据解构

在这里插入图片描述

案例:
在这里插入图片描述

在这里插入图片描述
数据如下:

{success: true, code: 10000, data: {}, message: "执行成功"}
code: 10000
data:list: Array(7)0: {_id: "608b70ecf9d99a7594662466", id: "0", label: "热榜"}1: {_id: "608b70ecf9d99a7594662467", id: "1", label: "前端"}2: {_id: "608b70ecf9d99a7594662468", id: "2", label: "JAVA"}3: {_id: "608b70ecf9d99a7594662469", id: "3", label: "PHP"}4: {_id: "608b70ecf9d99a759466246a", id: "4", label: "Python"}5: {_id: "608b70ecf9d99a759466246b", id: "5", label: "程序人生"}6: {_id: "608b70ecf9d99a759466246c", id: "6", label: "数据库"}
length: 7
nv_length: (...)
__proto__: Array(0)
__proto__: Object
message: "执行成功"
success: true
__proto__: Object

返回的数据都在res的data标签的list数组中,其他外测数据节点不需要

可以进行数据解构:
将后端返回的数据局中把data结构出来并赋值给res变量,然后从res.list就可以获取数据
在这里插入图片描述
这是解构出来的数据
在这里插入图片描述

真实场景案例:

<template><view class="hot-container"><view v-for="(item, index) in tabData" :key="index">{{ item.label }} - {{ index }}</view></view>
</template><script>
import { getHotTabs } from 'api/hot';
export default {data() {return {tabData: [],};},// 组件实例配置完成,但是DOM尚未渲染,进行网络请求,配置响应数据created() {this.loadHotTabs();},methods: {/*** 获取热搜标题数据*/async loadHotTabs() {// uniapp 支持 async awaitconst { data: res } = await getHotTabs();this.tabData = res.list;console.log('res', res);console.log('res', res.list);},},
};
</script><style lang="scss"></style>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于云存储网关的Veeam备份归档上云方案

前言 面对数据可靠性和合规性要求的不断增长&#xff0c;只备份一份数据已经不能满足用户对于数据可靠性的需求。传统备份厂商的异地备份方案是将用户生产环境里的数据备份至不同机柜或者异地机房来保护数据&#xff0c;规避单机房存在的机柜或机房断电断网等问题。公共云的出现…

阿里达摩院青橙奖“硬核10人”出炉,钟南山寄语青年科学家

9月9日&#xff0c;2020年阿里巴巴达摩院青橙奖获奖名单公布&#xff0c;梁文华等10位青年科学家获得达摩院的1000万元奖金。这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励&#xff1a;“你们处在最好的时候&#xff0c;要记得把握机遇。” 青橙奖是阿里巴巴…

vue 微信开发工具 Maximum call stack size exceeded

文章目录现象原因解决方案现象 某段代码出现了内存溢出的现象 原因 出现了死循环调用的代码片段 解决方案 仔细检查一下&#xff0c;很容易发现的 案例场景&#xff1a; [Vue warn]: Error in v-on handler: “RangeError: Maximum call stack size exceeded” (found in…

深源恒际上线二代个人信用报告OCR识别服务

1月中旬&#xff0c;央行征信中心启动了二代征信系统切换上线工作&#xff0c;开始面向社会公众和金融机构开放二代格式信用报告查询服务。随后&#xff0c;深源恒际及时跟进信用报告OCR识别产品的升级工作。目前产品迭代已完成&#xff0c;深源恒际将于本周内上线二代个人信用…

直播预告 | 阿里巴巴自研代码管理平台技术解密

4月23日&#xff0c;企业级一站式DevOps平台——阿里云云效正式开启公测&#xff0c;我们特别策划了《为云研发而生&#xff0c;解密云效公测版专场》视频直播活动&#xff0c;邀请了5位阿里巴巴技术专家通过视频直播的方式与大家在线交流&#xff0c;分享云效产品的亮点和技术…

1024程序员节开源技术英雄会,参会“英雄榜”发榜

10月23-25日&#xff0c;由CSDN等多家单位精心筹划的“长沙 中国1024程序员节”将盛大举行。程序员节活动以开源为主议题&#xff0c;包括2场岳麓尖峰对话&#xff1b;2020开源技术英雄大会&#xff1b;10场热门技术分论坛/峰会&#xff1b;创意集市&#xff1b;体验感超强的科…

uni-app 微信小程序授权登录

文章目录一、appID相关申请和配置1. appid获取方式2. appID配置二、获取用户基础数据2.1. 获取用户信息2.2. 获取用户信息2三、调用登录api3.1. 登录api3.2. 案例代码四、获取唯一标识信息4.1. 官网文档4.2. 接口简述五、绑定用户 实现登录5.1. 代码案例&#xff08;未封装&…

从图森未来的数据处理平台,看Serverless工作流应用场景

Serverless工作流来了&#xff01; 发布会传送门 抢先了解Serverless技术干货 4月&#xff0c;阿里云Serverless工作流正式商业化&#xff0c;这是一款用于协调多个分布式任务执行的全托管 Serverless 云服务。产品致力于简化开发和运行业务流程所需要的任务协调、状态管理以及…

uniapp 开发基础环境搭建和配置

文章目录一、下载并安装开发工具1. 官网下载2. 点击 DOWNLOAD3. 版本选择二、安装 sass 依赖2.1. 打开 HBuilder X2.2. 打开插件地址2.3. 导入插件2.4. 在弹出框中点击2.5. 点击【是】2.6. 下载状态2.7. 等待完成即可三、创建 uni-app 项目3.1. 创建项目3.2. 项目目录介绍一、下…

大厂技术文档:Python基础+爬虫+数据分析+面试经精选

有段时间没跟各位粉丝分享编程资源福利了&#xff0c;看了下自己的资料夹&#xff0c;就剩下我认为比较好的Python学习资料了。相信这套资料可以对你进阶高级工程师有帮助&#xff01;为什么只有Python这么火&#xff0c;能有机会成为通用语言&#xff1f;核心还是因为企业需要…

金融业务数字化,用户体验和安全防护双重挑战,你该怎么办?

在数字化转型的浪潮中&#xff0c;金融行业一直是最活跃的行业之一。受到新冠疫情影响&#xff0c;各商业银行、券商、保险企业的线上流量迅速攀升&#xff0c;线上金融业务将从互金时代直接跃迁到全面线上化时代。2月24日&#xff0c;中国银保监会下发的《关于进一步做好疫情防…

怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 阿里云CDN经过10多年的技术沉淀和实践&#xff0c;已经从传统的加速&#xff0c;逐渐构筑起一个边缘云的安…

Cannot read property ‘forceUpdate‘ of undefined

文章目录现象解决方案现象 VM46 WAService.js:2 TypeError: Cannot read property ‘forceUpdate’ of undefined 解决方案 解决 Cannot read property forceUpdate of undefined 的错误 这个错误的原因非常简单&#xff0c;是因为我们没有为项目配置 appID 的原因&#xf…

如何应对云原生之旅中的安全挑战?

作者 |Pavan Belagatti译者 | 弯月头图 | CSDN 下载自东方 IC来源 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;以下为译文&#xff1a;如果你已经接受了云原生计算的概念和原理&#xff0c;那么代表你已经处于领先地位。在当今先进且竞争激烈的IT环境中&#xff0c;…

阿里云:构建全球企业内外安全网络最佳实践

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 全球连接&#xff0c;立体防护 网络安全的最大挑战之一来自于不同地域的网络之间的访问&#xff0c;连接…

[sitemap 索引情况提示] 根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引

[sitemap 索引情况提示] 根据 sitemap 的规则[0]&#xff0c;当前页面 [pages/index/index] 将被索引 微信小程序默认开启了索引功能&#xff0c;但是因为我们没有配置索引策略&#xff0c;导致出现了这么一个警告的问题。具体情况可以参考&#xff1a;https://developers.weix…

Argo 项目入驻 CNCF,一文解析 Kubernetes 原生工作流

作者 | 遥鹭、郡宝 导读&#xff1a;近期&#xff0c;CNCF 技术监督委员会&#xff08;Technical Oversight Committee&#xff0c;TOC&#xff09;投票决定接受 Argo 作为孵化级别的托管项目。作为一个新加入的项目&#xff0c;Argo 主要关注于 Kubernetes 原生的工作流&…

腾讯智慧出行和现代汽车集团创新中心(北京)正式建立创新战略合作伙伴关系

2020年10月16日&#xff0c;腾讯智慧出行与现代汽车集团创新中心(北京)&#xff08;Hyundai CRADLE Beijing&#xff09;正式在汽车出行领域建立创新战略合作伙伴关系&#xff0c;双方将充分利用各自在智慧出行和互联网生态的优势资源&#xff0c;共同助力中国优秀初创企业&…

五项措施,让阿里云存储更安全

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 一、存储面临的安全新挑战 1、 安全合规成为必选项 2017 年 6 月 1 日&#xff0c;《中华人民共和国网络…

微信小程序 AppID和AppSecret的获取方式

微信公众平台&#xff1a;https://mp.weixin.qq.com/ 第一次需要注册&#xff0c;有账号直接扫扫码登陆即可