vue中如何使用math.js

 更新时间:2023年05月20日 09:42:39   作者:崎凌  
这篇文章主要介绍了vue中如何使用math.js问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue使用math.js

math.js可以解决前端金额类计算精度问题

安装math.js

npm install mathjs

math.js配置

新建math.js文件内容如下

const $math = require('mathjs')
export const math = {
  add () {
    return comp('add', arguments)
  },
  subtract () {
    return comp('subtract', arguments)
  },
  multiply () {
    return comp('multiply', arguments)
  },
  divide () {
    return comp('divide', arguments)
  }
}
function comp (_func, args) {
  let t = $math.chain($math.bignumber(args[0]))
  for (let i = 1; i < args.length; i++) {
    t = t[_func]($math.bignumber(args[i]))
  }
  // 防止超过6位使用科学计数法
  return parseFloat(t.done())
}

建议存放在utils文件夹下

引入math.js

import { math } from '@/utils/math.js'

math.js使用

math.add(a+b)//加
math.subtract(a-b)//减
math.multiply(a*b)//乘
math.divide(a/b)//除

如需其他计算方法可点击标题math.js进入官网查看语法并添加到math.js文件中

vue使用mathjs解决前端计算精度不足问题

在前端开发过程中,你会发现0.1 + 0.2 != 0.3 如下图

在这里插入图片描述

他居然等于0.30000000000000004…

为什么会这样大家可以百度,涉及到10进制和2进制的转换问题,我们暂不讨论,我们先来解决这个问题。

现在有现成的库给我们调用 math.js

首先先安装依赖

npm install mathjs --save

然后再需要计算的页面调用

import * as math from 'mathjs'

下面记录简单的加减乘除方法,其余更牛逼的数学算法大家可以自行翻文档研究

加法

// 原本
console.log(0.1 + 0.2) // 0.30000000000000004
// 用math.js之后
const addNumber = math.format(
  math.add(
  	math.bignumber(0.1),math.bignumber(0.2)
  )
)
console.log(addNumber) // 0.3

减法

// 原本
console.log(1 - 0.9) // 0.09999999999999998
// 用math.js之后
const subtractNumber = math.format(
  math.subtract(
  	math.bignumber(1), math.bignumber(0.9)
  )
)
consol(subtractNumber) // 0.1

乘法

// 原本
console.log(10 * 1.2 * 0.3) // 3.5999999999999996
// 用math.js之后
const multiplyMumber = math.format(
  math.multiply(
  	math.bignumber(10), math.bignumber(1.2), math.bignumber(0.3)
  )
)
console.log(multiplyMumber) // 3.6

除法

// 原本
console.log(1.2 / 3) // 0.39999999999999997
// 用math.js之后
const divideNumber = math.format(
  math.divide(
  	math.bignumber(1.2), math.bignumber(3)
  )
)
console.log(divideNumber) // 0.4

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Nuxt.js部署及踩过的坑

    详解Nuxt.js部署及踩过的坑

    这篇文章主要介绍了详解Nuxt.js部署及踩过的坑,Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • vue3中轻松实现switch功能组件的全过程

    vue3中轻松实现switch功能组件的全过程

    这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 实现一个简单的vue无限加载指令方法

    实现一个简单的vue无限加载指令方法

    vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简单的指令。
    2017-01-01
  • vue+element表格导出为Excel文件

    vue+element表格导出为Excel文件

    这篇文章主要为大家详细介绍了vue+element表格导出为Excel文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue导出页面为PDF格式的实现思路

    Vue导出页面为PDF格式的实现思路

    这篇文章主要介绍了Vue导出页面为PDF格式的实现思路,其实思路也很简单,就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-07-07
  • vue中keep-alive的用法及问题描述

    vue中keep-alive的用法及问题描述

    这篇文章主要介绍了vue中keep-alive的用法及问题描述,本文给大家介绍的非常详细,具有一定的参考解决价值,需要的朋友可以参考下
    2018-05-05
  • 使用Vue实现移动端左滑删除效果附源码

    使用Vue实现移动端左滑删除效果附源码

    这篇文章主要介绍了使用Vue实现移动端左滑删除效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue 2中实现CustomRef方式防抖节流

    Vue 2中实现CustomRef方式防抖节流

    这篇文章主要为大家介绍了Vue 2中实现CustomRef方式防抖节流示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue 中页面传值的多种方式小结

    Vue 中页面传值的多种方式小结

    本文主要介绍了Vue 中页面传值的多种方式小结,主要包括路由传参、Vuex 状态管理、Props 属性和事件传递数据这几种,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • vue3.0使用mapState,mapGetters和mapActions的方式

    vue3.0使用mapState,mapGetters和mapActions的方式

    这篇文章主要介绍了vue3.0使用mapState,mapGetters和mapActions的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论