vue中精确计算问题，出现很多位小数的问题与原因（丢失精度的问题）

出现的原因（推荐使用方法二）
计算机把小数转换成二级制，会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候，变成了一个无限循环的数字。在处理双精度浮点数的小数部分最多支持 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)}}

 解决方法二：

非常好用的number-precision

安装：
npm install number-precision --save

使用：
import NP from 'number-precision';

方法：
NP.plus(num1, num2, num3, ...)   // addition, num + num2 + num3, two numbers is required at least.
NP.minus(num1, num2, num3, ...)  // subtraction, num1 - num2 - num3
NP.times(num1, num2, num3, ...)  // multiplication, num1 * num2 * num3
NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3

eg:

　　import NP from 'number-precision'
　　NP.strip(0.09999999999999998); // = 0.1
　　NP.plus(0.1, 0.2); // = 0.3, not 0.30000000000000004
　　NP.plus(2.3, 2.4); // = 4.7, not 4.699999999999999
　　NP.minus(1.0, 0.9); // = 0.1, not 0.09999999999999998
　　NP.times(3, 0.3); // = 0.9, not 0.8999999999999999
　　NP.times(0.362, 100); // = 36.2, not 36.199999999999996
　　NP.divide(1.21, 1.1); // = 1.1, not 1.0999999999999999
　　NP.round(0.105, 2); // = 0.11, not 0.1

想知道更多可以查看文档https://www.npmjs.com/package/number-precision/v/1.5.1