前端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 封装公告滚动的方法

    Vue 封装公告滚动的方法

    文章介绍了如何在需求系统中创建一个位于页面上方的公告展示组件,展示了如何在App.vue或其他页面组件中使用这个公告组件,感兴趣的朋友一起看看吧
    2025-01-01
  • vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

    vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

    这篇文章主要介绍了vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多,本文分步骤通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue项目中路径使用@和~的区别及说明

    vue项目中路径使用@和~的区别及说明

    这篇文章主要介绍了vue项目中路径使用@和~的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue3数据可视化实现数字滚动特效代码

    vue3数据可视化实现数字滚动特效代码

    这篇文章主要介绍了vue3数据可视化实现数字滚动特效,实现思路是使用Vue.component定义公共组件,使用window.requestAnimationFrame(首选,次选setTimeout)来循环数字动画,详细代码跟随小编一起看看吧
    2022-09-09
  • vue 自定义提示框(Toast)组件的实现代码

    vue 自定义提示框(Toast)组件的实现代码

    这篇文章主要介绍了vue 自定义提示框(Toast)组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • uniapp+Vue3 组件之间的传值方法示例详解

    uniapp+Vue3 组件之间的传值方法示例详解

    文章主要介绍了父子传值、兄弟传值和provide/inject三种在Vue中进行组件间通信的方法,感兴趣的朋友跟随小编一起看看吧
    2025-03-03
  • 3分钟读懂移动端rem使用方法(推荐)

    3分钟读懂移动端rem使用方法(推荐)

    这篇文章主要介绍了rem使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue 实现click同时传入事件对象和自定义参数

    vue 实现click同时传入事件对象和自定义参数

    这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • 使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件

    这篇文章主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue3+element plus中利用el-menu如何实现路由跳转

    vue3+element plus中利用el-menu如何实现路由跳转

    这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下
    2023-12-12

最新评论