vue页面中金额计算（加减乘除）

最新推荐文章于 2024-03-01 17:47:53 发布

weixin_41778291

最新推荐文章于 2024-03-01 17:47:53 发布

阅读量8.8k

点赞数 1

分类专栏： java技术文章标签： vue js

本文链接：https://blog.csdn.net/weixin_41778291/article/details/108872521

版权

java技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js中实现高精度的金额计算，包括加法、减法、乘法和除法操作，确保在处理涉及小数的财务计算时避免精度丢失。提供了详细的函数实现和一个充值金额累计计算的案例，展示了如何在Vue组件中实时更新累计充值金额。

摘要由CSDN通过智能技术生成

vue页面中金额计算（加减乘除）

Vue.prototype.highPrecisionAdd = function (data1,data2) {// 加法
       let r1,r2,m;
       // 获取每个参数的小数的位数
       try{r1=data1.toString().split(".")[1].length}catch(e){r1=0}
       try{r2=data2.toString().split(".")[1].length}catch(e){r2=0}
       // 计算底数为10以最大小数位数为次幂的值
       m=Math.pow(10,Math.max(r1,r2));
       // 把所有参数转为整数后相加再除以次幂的值
       return (data1*m + data2*m)/m;
     };
 
     Vue.prototype.highPrecisionReduce = function (data1,data2) {// 减法
       let r1,r2,m,n;
       // 获取每个参数的小数的位数
       try{r1=data1.toString().split(".")[1].length}catch(e){r1=0}
       try{r2=data2.toString().split(".")[1].length}catch(e){r2=0}
       // 计算底数为10以最大小数位数为次幂的值
       m=Math.pow(10,Math.max(r1,r2));
       //精度长度以最大小数位数为长度
       n=(r1>=r2)?r1:r2;
       return ((data1*m-data2*m)/m).toFixed(n);
     };
     Vue.prototype.highPrecisionMul = function (data1,data2) {// 乘法
       let m=0,s1=data1.toString(),s2=data2.toString();
       // 获取所有参数小数位长度之和
       try{m+=s1.split(".")[1].length}catch(e){}
       try{m+=s2.split(".")[1].length}catch(e){}
       // 替换掉小数点转为数字相乘再除以10的次幂值
       return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
     };
     Vue.prototype.highPrecisionDiv = function (data1,data2) {// 除法
       let t1=0,t2=0,r1,r2;
       // 获取每个参数的小数的位数
       try{t1=data1.toString().split(".")[1].length}catch(e){}
       try{t2=data2.toString().split(".")[1].length}catch(e){}
       // 把所有参数的小数点去掉转为整数
       r1=Number(data1.toString().replace(".",""));
       r2=Number(data2.toString().replace(".",""));
       return (r1/r2)*Math.pow(10,t2-t1);
     };

案例1金额动态计算（已经充值的金额+本次充值金额=累计充值金额）

<el-col :span="10">
                            <el-form-item label="本次充值金额" prop="advanceAmt" style="width: 450px" >
                                <el-input  v-model.number="transferInfo.advanceAmt"  type= "number" :maxlength="100" style="width: 300px" :disabled="flag=='view'"   @input="paymentChanges()"   ></el-input>
                            </el-form-item>
                       </el-col>

 methods: {
      	//累计金额相加
        paymentChanges(){
            var _this = this;
            var data1 = _this.transferInfo.sumAmt;
            var data2 = _this.transferInfo.advanceAmt;
            // 加法
           let r1,r2,m;
           // 获取每个参数的小数的位数
           try{r1=data1.toString().split(".")[1].length}catch(e){r1=0}
           try{r2=data2.toString().split(".")[1].length}catch(e){r2=0}
           // 计算底数为10以最大小数位数为次幂的值
             m=Math.pow(10,Math.max(r1,r2));
           // 把所有参数转为整数后相加再除以次幂的值
            _this.transferInfo.sumAdvanceAmt = (data1*m + data2*m)/m;
            
        },
       }