前端数据解构

在这里插入图片描述

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

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

{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,一经查实,立即删除!

相关文章

7.仿若依后端系统业务实践

目录 概述项目实践mybatis 反向生成代码有覆盖问题解决pom.xmlbootstrap.ymlapplication.ymlmaven测试各种校验问题实践单个属性校验级联属性校验接口实体类测试结果自定义关联属性校验接口

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

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

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

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

Node.js 入门详解(四)

数据库与身份认证 1. 数据库的基本概念1.1 什么是数据库1.2 常见的数据库及分类1.3 传统型数据库的数据组织结构1.3.1 Excel的数据组织结构1.3.2 传统型数据库的数据组织结构1.3.3 实际开发中库、表、行、字段的关系2. 安装并配置MySQL2.1 了解需要安装哪些 MySQL 相关的软件2.…

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;分享云效产品的亮点和技术…

重温前端基础(一) HTML、CSS、H5C3

目录 0. WEB 标准构成1. HTML1.1 HTML概念1.2 超文本含义1.3 页面语言1.4 字符集1.5 标签语义化1.6 常用标签1.7 图像标签 img1.8 链接标签1.9 锚点定位1.10 base 标签1.11 特殊字符1.12 XHTML1.13 HTML和 XHTML之间的区别1.14 表格1.14.1 表格属性1.14.2 表头单元格标签 th1.1…

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;核心还是因为企业需要…

重温前端基础(二) 移动WEB开发

目录 1. 移动端基础2. 视口2.1 meta标签3. 二倍图3.1 物理像素 & 物理像素比3.2 背景缩放 background-size4. 移动开发选择和技术解决方案4.1 移动端主流方案4.2 移动端技术解决方案4.3 CSS3盒子模型 box-sizing4.4 移动端特殊样式5. 移动端常见布局5.1 流式布局5.2 flex布…

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

在数字化转型的浪潮中&#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;连接…

超详细前端开发案例:品优购商场项目(一)

目录 1. 品优购项目介绍2. 项目背景3. 设计目标4. 几点思考5. 代码规范6. 前期准备工作目录文件夹样式文件的分类7. 网站ico图标7.1 使用ico图标7.2 制作ico图标8. 网站优化三大标签8.1 网页title 标题8.2 Description 网站说明8.3 Keywords 关键字8.4 总结9. 字体图标9.1 字体…