前端vue项目如何使用Decimal.js做加减乘除求余运算

 更新时间:2024年05月28日 08:59:23   作者:H_HX126  
decimal.js是使用的二进制来计算的,可以更好地实现格化式数学运算,对数字进行高精度处理,使用decimal类型处理数据可以保证数据计算更为精确,这篇文章主要给大家介绍了关于前端vue项目如何使用Decimal.js做加减乘除求余运算的相关资料,需要的朋友可以参考下

1 vue项目安装Decimal

npm install decimal.js

2 注意

运算结果是Decimal对象,需要使用.toNumber()转为数字

3 加 add

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.add(num2);

4 减 sub

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.sub(num2);

5 乘 mul

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.mul(num2);

6 除 div

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.div(num2);

7 求余 modulo

const Decimal = require('decimal.js')
const num1 = Decimal("5");
const num2 = Decimal("3");
const remainder = num1.modulo(num2);

附:vue 使用decimal.js 解决小数相加合计精确度丢失问题

  • 安装依赖 decimal.js
    • npm install --save decimal.js
  • 封装
    • 在utils文件夹下创建decimal.js文件
import { Decimal } from 'decimal.js'
export function add (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        y = 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.plus(yy).toNumber()
}
// 减
export function sub (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        y = 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.sub(yy).toNumber()
}
// 除
export function div (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        return 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.div(yy).toNumber()
}
//乘
export function mul (x, y) {
    if (!x) {
        x = 0
    }
    if (!y) {
        y = 0
    }
    const xx = new Decimal(x)
    const yy = new Decimal(y)
    return xx.mul(yy).toNumber()
}
  • 页面使用
<script>
  import {add} from "@/utils/decimal"
  export default {
    methods:{
      handlePlus() {
        add(10.5,4.877)
      }
    }
  }
</script>

总结 

到此这篇关于前端vue项目如何使用Decimal.js做加减乘除求余运算的文章就介绍到这了,更多相关vue Decimal.js做加减乘除求余运算内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue代理请求之Request failed with status code 404问题及解决

    vue代理请求之Request failed with status code 404问题及解决

    这篇文章主要介绍了vue代理请求之Request failed with status code 404问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue解决跨域问题的几种方式

    vue解决跨域问题的几种方式

    这篇文章主要给大家介绍了关于vue解决跨域问题的几种方式,跨域跨域报错是前端开发中非常经典的一个错误,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue懒加载和子组件懒加载的区别详解

    vue懒加载和子组件懒加载的区别详解

    这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2023-12-12
  • 案例实操vue事件修饰符带你快速了解与应用

    案例实操vue事件修饰符带你快速了解与应用

    这篇文章主要介绍了vue常见的事件修饰符,在平时无论是面试还是学习工作中都会经常遇到的,本文就带你快速上手,需要的朋友可以参考下
    2023-03-03
  • 用uniapp写一个好看的登录页面

    用uniapp写一个好看的登录页面

    随着移动互联网的发展,移动端app的使用越来越普及,而对于开发者来说如何设计一款简单易用的app是一项不容忽视的工作,其中登录页面是app使用过程中最基础的组成部分之一,这篇文章主要给大家介绍了关于用uniapp写一个好看的登录页面的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue使用代理解决请求跨域问题详解

    vue使用代理解决请求跨域问题详解

    这篇文章主要为大家详细介绍了vue使用代理解决请求跨域问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 详解vue-router和vue-cli以及组件之间的传值

    详解vue-router和vue-cli以及组件之间的传值

    这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue视图响应式更新详细介绍

    vue视图响应式更新详细介绍

    这篇文章主要介绍了Vue响应式原理,响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生了改变的时候,就会运行一些函数,最常见的示render函数
    2022-09-09
  • 前端vue项目debugger调试操作详解

    前端vue项目debugger调试操作详解

    在vue项目调试的时候,代码里面标注debugger,这篇文章主要给大家介绍了关于前端vue项目debugger调试操作的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • vue input输入框关键字筛选检索列表数据展示

    vue input输入框关键字筛选检索列表数据展示

    这篇文章主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论