前端拿到后端接口字段为null时,一行代码为你解决

简介: 我们可以看到有三个字段为 null ,我们前端要拿字段渲染到页面不可能把null 渲染出去

一、 直接上案例

1.如下图是前端拿到的后端接口

image.png

2.我们可以看到有三个字段为 null ,我们前端要拿字段渲染到页面不可能把null 渲染出去,如下图:
image.png

像这样金额不可能给用户体验为 -¥null 完全没有一点用户体验

二、解决方法

1.仅需加上非空判断即可,当值为null时 将转换成0.00


            toList() {
   
   
                var that = this
                axios.post(api.contractApplyList,
                    {
   
   
                        deductionAmount:res.data.list.deductionAmount!=null?res.data.list.deductionAmount:'0.00', //关键核心代码

                    }).then(function (response) {
   
   

                    })
                    .catch(function (error) {
   
   
                        console.log(error);
                    });
            },

看效果
image.png

好了,到这里就要跟大家说再见了

目录
相关文章
|
7天前
|
前端开发 JavaScript Java
【前端学java】Java中的接口和枚举概念(8)
【8月更文挑战第9天】Java中的接口和枚举概念(8)
24 4
|
14天前
|
Java 程序员 编译器
作为后端开发,感受下接口带来的魅力!🔥🔥
在一场大厂面试中,小南被问及何时选用接口,何时采用抽象类。一位拥有24K粉丝的博主给出解答:选择取决于需求——接口定义多个类需遵守的契约,而抽象类则用于创建共享实现的基类。有时两者结合使用,通过抽象类实现接口以确保契约并提供通用功能。此外,小南还分享了关于抽象类的深入探讨,包括子类如何正确调用父类构造函数、访问父类成员以及父类不可访问的方法等细节。最后,他提出一个关于接口与抽象类差异的小测验,并邀请读者关注他的开源项目《Java学习进阶指南》,旨在帮助Java开发者更好地掌握核心知识和面试要点。
作为后端开发,感受下接口带来的魅力!🔥🔥
|
1天前
|
前端开发 IDE Java
"揭秘前端转Java的秘径:SpringBoot Web极速入门,掌握分层解耦艺术,让你的后端代码飞起来,你敢来挑战吗?"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发,通过简化Spring应用搭建,快速实现Web应用。本文以创建“Hello World”应用为例,展示项目基本结构与运行方式。进而深入探讨三层架构(Controller、Service、DAO)下的分层解耦概念,通过员工信息管理示例,演示各层如何协作及依赖注入的使用,以此提升代码灵活性与可维护性。
|
1天前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
12天前
|
缓存 前端开发 应用服务中间件
看看高手是怎么部署前端代码的
【8月更文挑战第8天】从简单的前端项目部署开始,构建dist文件夹并通过Nginx代理接口请求,以解决跨域问题。为进一步优化大型系统的性能及稳定性,需采用高级部署策略。例如,利用CDN分发静态资源并采用缓存控制减少带宽消耗,通过文件哈希值更新URL确保资源按需刷新。面对大规模部署挑战,采用非覆盖式发布方法避免样式错乱风险,并通过灰度部署逐步验证新版功能,确保服务平稳过渡。借助Nginx实现流量切分,可灵活调整新旧版本流量比例,有效降低上线风险。
24 3
|
11天前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
52 1
|
5天前
|
前端开发
前端代码书写规范
【8月更文挑战第15天】前端代码书写规范
10 0
|
5天前
|
JSON 前端开发 Java
前端如何提交数据给后端(包含前端和后端代码)
前端如何提交数据给后端(包含前端和后端代码)
|
10天前
|
缓存 JavaScript 前端开发
前端10种火火火火的优化代码性能方法!避免代码跑起来像蜗牛!
前端10种火火火火的优化代码性能方法!避免代码跑起来像蜗牛!
|
18天前
|
JavaScript 前端开发 中间件
打造卓越后端:构建高效API的最佳实践与实战代码示例——解锁高性能Web服务的秘密
【8月更文挑战第2天】构建高效后端API:最佳实践与代码示例
33 0