vuejs处理后端返回数字类型精度丢失问题

标题问题描述

后端返回数据有5.003.30这种数据,但是前端展示的时候返回对应分别为53.0,小数点后0都丢失了。

  • 接口返回数据展示network-Response
    在这里插入图片描述
  • 接口返回数据展示network-Preview
    在这里插入图片描述
  • 错误数据效果展示
    在这里插入图片描述

发现问题

  • 浏览器接口network中Preview是返回的5和3.3,Response返回的是5.00和3.30
    因为后端返回的数据类型不是字符串,是数字类型
  • 打印出来接口返回数据这里已经是精度丢失的数据,深拷贝也是返回的错误的数据精度
    再页面渲染的时候使用v-html也不能生效

研究了一下是vue在渲染数据的时候,处理数据把3.30格式化3.3,所以前端需要重新处理一下数据格式,格式化后端返回我们的正常数据

第一种:{{ parseFloat(scope.row.amountFee).toFixed(2) }} 
第二种:{{ (scope.row.amountFee).toFixed(2) }}
第三种:使用第三方库 BigNumber.js(可以 但没必要~~~)
BigNumber = require('bignumber.js');
let num = new BigNumber(5).toFixed(2));
console.log(num.toFixed(2)); // "5.00"

在这里插入图片描述

正确效果展示

在这里插入图片描述

总结:

之前以为只有id这种 LONG型长度不够的时候,会有精度丢失问题,后端会把返回的数据类型从数字改为字符串,解决此类问题。
现在是这种5.00的数据类型vue再渲染的时候也会自动处理,再不改变后端数据类型的情况下,前端可以手动修改一下,保证和后端返回的数据格式一致。

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

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

相关文章

ubuntu kubeasz 部署高可用k8s 集群

ubuntu kubeasz 部署高可用k8s 集群 测试环境主机列表软件清单kubeasz 部署高可用 kubernetes配置源配置host文件安装 ansible 并进行 ssh 免密登录:下载 kubeasz 项⽬及组件部署集群部署各组件开始安装修改 config 配置文件增加 master 节点增加 kube_node 节点登录dashboard…

IDEA2025版本使用Big Data Tools连接Linux上Hadoop的HDFS

目录 Windows的准备 1. 将与Linux上版本相同的hadoop压缩包解压到本地 ​编辑2.设置$HADOOP HOME环境变量指向:E:\hadoop-3.3.4 3.下载hadoop.dll和winutils.exe文件 4.将hadoop.dll和winutils.exe放入$HADOOP HOME/bin中 IDEA中操作 1.下载Big Data Tools插件 2.添加并连…

Java转Go日记(三十九):Gorm查询

1.1.1. 查询 // 获取第一条记录,按主键排序db.First(&user)SELECT * FROM users ORDER BY id LIMIT 1;// 获取最后一条记录,按主键排序db.Last(&user)SELECT * FROM users ORDER BY id DESC LIMIT 1;// 获取所有记录db.Find(&users)SELECT *…

bisheng系列(二)- 本地部署(前后端)

一、导读 环境:Ubuntu 24.04、open Euler 23.03、Windows 11、WSL 2、Python 3.10 、bisheng 1.1.1 背景:需要bisheng二开商用,故而此处进行本地部署,便于后期调试开发 时间:20250519 说明:bisheng前后…

5G金融互联:迈向未来金融服务的极速与智能新时代

5G金融互联:迈向未来金融服务的极速与智能新时代 大家好,我是Echo_Wish,今天咱们聊聊一个大家都十分关心的话题:5G网络在金融服务中的应用。咱们平时可能觉得5G只是打个电话、刷个视频更流畅了,但在金融服务领域,5G的低延时、大带宽和高可靠性正在悄然改变整个游戏规则。…

UE5 GAS框架解析内部数据处理机制——服务器与客户端

当, gas通过点击鼠标光标触发事件时,内部的处理机制。 当通过点击事件,命中中目标时, 可获取到对应的TargetData 目标数据。处理相应的操作。 仅有本地的客户端的情况下。命中并不会有什么异常。 当存在服务器时, 服…

Golang的Web应用架构设计

# Golang的Web应用架构设计 介绍 是一种快速、高效、可靠的编程语言,它在Web应用开发中越来越受欢迎。Golang的Web应用架构设计通常包括前端、后端和数据库三个部分。在本篇文章中,我们将详细介绍Golang的Web应用架构设计及其组成部分。 前端 在Golang的…

对比 HTTP-REST 与 gRPC:各自的优缺点以及适用的场景

文章目录 对比 HTTP-REST 与 gRPC:各自的优缺点以及适用的场景HTTP-REST 与 gRPC 的核心区别gRPC 的优缺点HTTP-REST 的优缺点适用场景 模糊点什么是 Protobuf?HTTP/2 会将 HTTP 消息拆分并封装为二进制帧,那还能过使用 HTTP/2 构建 RESTful …

现代健康生活养生指南

现代社会中,熬夜加班、久坐不动、饮食不规律成为许多人的生活常态,由此引发的健康问题也日益增多。想要摆脱亚健康,不必依赖中医理念,从以下这些现代科学养生方法入手,就能逐步改善身体状况。​ 饮食上,注…

Go语言数组的定义与操作 - 《Go语言实战指南》

在 Go 语言中,数组(Array) 是一种定长、同类型的集合。它在内存中是连续分布的,适合用于性能敏感的场景。 一、数组的定义 数组的基本语法如下: var 数组名 [长度]元素类型 示例: var nums [5]int …

Helm Chart 中配置多个 Docker Registry 地址以实现备用访问

在 Helm Chart 中配置多个 Docker Registry 地址以实现备用访问,可以通过以下几种方式实现: 1. 在 values.yaml 中定义多个 Registry 在 values.yaml 中定义主 Registry 和备用 Registry,以便在部署时灵活切换: # values.yaml …

云原生安全:错误策略S3存储桶ACL设置为Everyone:FullControl

🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 ——从基础到实践的深度解析 1. 基础概念 S3存储桶与ACL Amazon S3(Simple Storage Service)是AWS提供的对象存储服务,支持存储和检索任意规模的数据。ACL(访问控制列表…

.NET 8 kestrel 配置PEM,实现内网https

一、生成证书 mkcert 是一个简单的工具,用于制作本地信任的开发证书。它不需要配置。 mkcert官方仓库地址:GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names youd like. 简…

nodejs快速入门到精通1

参考 nodejs快速入门到精通 菜鸟教程-nodejs nodejs官方文档 原因 视频免费 资料收费 笔记还是自己写吧 安装 nodejs官网 windows下: #查看nodejs版本 node -v #查看npm版本 npm -v #设置npm为淘宝镜像源 npm config set registry https://registry.npmmirror.…

nginx负载均衡及keepalive高可用

实验前期准备: 5台虚拟机:4台当做服务器,1台当做客户机(当然,也可以使用主机的浏览器),4台服务器中,2台服务器当做后端真实访问服务器;另外2台服务器当做负载均衡服务器…

go语法大赏

前些日子单机房稳定性下降,找了好一会才找到真正的原因。这里面涉及到不少go语法细节,正好大家一起看一下。 一、仿真代码 这是仿真之后的代码 package mainimport ("fmt""go.uber.org/atomic""time" )type StopSignal…

Android 14 解决打开app出现不兼容弹窗的问题

应用安装到 Android 14 上,出现如下提示 This app isn’t compatible with the latest version of Android. Check for an update or contact the app’s developer. 通过源码找原因。 提示的字符 根据字符找到 ./frameworks/base/core/res/res/values/strings.xm…

Linux句柄数过多问题排查

以下是Linux句柄数过多问题的排查与解决方法整理&#xff1a; 一、检测句柄使用情况 1‌.查看系统限制‌ 单个进程限制&#xff1a;ulimit -n 系统级总限制&#xff1a;cat /proc/sys/fs/file-max 2‌.统计进程占用量‌ 查看指定进程&#xff1a;lsof -p <PID> | wc -…

matlab插值方法(简短)

在MATLAB中&#xff0c;可以使用interp1函数快速实现插值。以下代码展示了如何使用spline插值方法对给定数据进行插值&#xff1a; x1 [23,56]; y1 [23,56]; X 23:1:56*4; Y interp1(x1,y1,X,spline);% linear、 spline其中&#xff0c;x1和y1是已知数据点&#xff0c;X是…

时间筛掉了不够坚定的东西

2025年5月17日&#xff0c;16~25℃&#xff0c;还好 待办&#xff1a; 《高等数学1》重修考试 《高等数学2》备课 《物理[2]》备课 《高等数学2》取消考试资格学生名单 《物理[2]》取消考试资格名单 职称申报材料 2024年税务申报 5月24日、25日监考报名 遇见&#xff1a;敲了一…