首页 > 其他分享 >vue中精确计算问题,出现很多位小数的问题与原因

vue中精确计算问题,出现很多位小数的问题与原因

时间:2023-06-27 17:23:41浏览次数:48  
标签:vue r1 arg1 arg2 问题 length toString split 小数

出现的原因
计算机把小数转换成二级制,会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候,变成了一个无限循环的数字。在处理双精度浮点数的小数部分最多支持 52 位,所以转换成十进制之后,就出现了很多位小数的存在。

例如:
0.1 + 0.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
0.8 * 3 = 2.4000000000000004
0.3 / 0.1 = 2.9999999999999996
// 比较
0.1 + 0.2 === 0.3 // false
(0.3 - 0.2) === (0.2 - 0.1) // false

解决方法

可以全局挂载在main.js文件中
再优化一下,可以新建config文件,创建js文件,专门放公共方法,然后在main.js中import
config文件  util.js

const install = function(Vue, options) {
乘法
Vue.prototype.NumberMul = function(arg1, arg2) {
    var m = 0;
    var s1 = arg1.toString();
    var s2 = arg2.toString();
    try {
        m += s1.split(".")[1].length;
    } catch (e) {}
    try {
        m += s2.split(".")[1].length;
    } catch (e) {}
 
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}


除法
// 除数,被除数, 保留的小数点后的位数
Vue.prototype.NumberDiv = function (arg1,arg2,digit){
    var t1=0,t2=0,r1,r2;
    try{t1=arg1.toString().split(".")[1].length}catch(e){}
    try{t2=arg2.toString().split(".")[1].length}catch(e){}
    r1=Number(arg1.toString().replace(".",""))
    r2=Number(arg2.toString().replace(".",""))
    //获取小数点后的计算值
   var result= ((r1/r2)*Math.pow(10,t2-t1)).toString()
    var result2=result.split(".")[1];
    result2=result2.substring(0,digit>result2.length?result2.length:digit);
 
    return Number(result.split(".")[0]+"."+result2);
}

加法
Vue.prototype.NumberAdd = function(arg1, arg2) {
    var r1, r2, m, n;
    try {
        r1 = arg1.toString().split(".")[1].length
    } catch (e) {
        r1 = 0
    }
    try {
        r2 = arg2.toString().split(".")[1].length
    } catch (e) { 
        r2 = 0 
    } 
    m = Math.pow(10, Math.max(r1, r2))
    n = (r1 >= r2) ? r1 : r2;
    return ((arg1 * m + arg2 * m) / m).toFixed(n);
}


减法
Vue.prototype.NumberSub = function(arg1, arg2) {
    var re1, re2, m, n;
    try {
        re1 = arg1.toString().split(".")[1].length;
    } catch (e) {
    re1 = 0;
    }
    try {
        re2 = arg2.toString().split(".")[1].length;
    } catch (e) {
        re2 = 0;
    }
    m = Math.pow(10, Math.max(re1, re2)); 
    n = (re1 >= re2) ? re1 : re2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
}

}

export default install

使用方法

例如乘法计算
{{NumberMul(0.0058,100)}}

 

标签:vue,r1,arg1,arg2,问题,length,toString,split,小数
From: https://www.cnblogs.com/alizhi/p/17509428.html

相关文章

  • 数据库索引问题定位与分析
    数据库索引问题定位与分析一.数据库服务器添加慢查询配置1.my.cnf文件添加监控慢查询配置cd/etc/my.cnfvimy.cnf添加如下配置:slow_query_log=1long_query_time=0.012.重启数据库服务器systemctlrestartmysqld3.检查配置是否生效showvariableslike'%slow_query_......
  • 联合索引问题定位与分析
    联合索引问题定位与分析一.配置联合索引二.联合索引生效规则最左侧生效原则1.不生效情况Age在联合索引的第左侧,where字句中,没有用到age所以联合索引不生效2.部分生效情况Email在联合索引的最左侧,slq语句中有email字段,email生效3.联合索引都生效Sql语句中where字段与联合索引完全一致......
  • glibc版本过低导致软件编译失败或引发其他问题
    glibc(GNUCLibrary)是一个核心库,为GNU/Linux操作系统提供最基本和最重要的系统调用和函数。它是标准C库的实现,被几乎所有基于Linux的应用程序使用。它提供了内存管理、输入/输出操作、文件处理、字符串操作和许多其他基本操作的函数。它由GNU计划维护,根据GNULesserGeneralPublic......
  • VUE 滚动到底部加载更多(附带指令实现方式)
    VUE滚动到底部加载更多(附带指令实现方式)直接上代码:mounted(){window.addEventListener('scroll',this.handleScroll,true);},destroyed(){window.removeEventListener('scroll',this.handleScroll);},methods:{......
  • vscode--C++配置问题
    1、#include<iostream>报红但是能正常运行解决方案:win+Rcmd进入输入gcc-v-E-xc++-将红框中数据复制进随后保存即可......
  • Android使用poi遇到的问题
    原文:Android使用poi遇到的问题关于Poi使用可以看这一篇【开源库推荐】#4Poi-办公文档处理库本篇主要讲些在Android上使用出现的问题问题原本是需要一个导出xlsx表格文件的功能,debug测试可以用,但是编译打包apk就报错了结论由于Poi里大量使用到了反射,所有使用Poi导出xlsx......
  • STM32 USART1 改成 UART4 出现问题
    STM32USART1改成UART4出现问题群里面叫了半天,野火胸也不出来,那么久没有办法了,我自己发个帖子解决下问了一下度娘,网上有很多关于stm32uart4的问题,有时进不去串口中断的,有发送乱码的,那么我就在这里总结一下首先我们看一下文档我用的stm32f103vet6的,所以USART是模式是3+2,......
  • 如何解决谐振式传感器产生的异常谐振问题?
    如何解决谐振式传感器产生的异常谐振问题?解决谐振式传感器产生的异常谐振问题需要进行以下步骤: 1.找出谐振频率:使用震动测试仪器或者频谱分析仪器来找出传感器的谐振频率。2.调整谐振频率:可以通过调整传感器的质量、刚度或者惯性矩来改变谐振频率。也可以将传感器与质量块......
  • 直播开发app,vue防抖 自定义ref实现输入框防抖
    直播开发app,vue防抖自定义ref实现输入框防抖 首先需要把input的双向绑定v-mode拆开为一个value和一个input事件,在事件里注册一个函数debUpdata,debUpdata里获取到input输入内容再赋值给text,这就类似于手写v-mode,代码如下: <template> <divclass="hello">  <inpu......
  • 基于vue+elementUI使用vue-amap高德地图
    首先,需要去高德地图进行注册一个https://lbs.amap.com/?ref=https://console.amap.com/dev/index,得到一个key然后安装依赖npminstallvue-amap—save在main.js中加入importVueAMapfrom'vue-amap’;Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:'YOUR_KEY’......