1、介绍

项目中出现四则运算精度错误问题，引入math.js来解决，并封装四则运算方法。

2、安装

  1. npm install mathjs

3、引入

全局引入

  1. //main.js引入
  2. import * as math from 'mathjs'
  3. Vue.prototype.$math = math
  5. 组件中使用
  6. $math.add($math.bignumber(a), $math.bignumber(b));

按需引入

  1. //组件中使用
  2. import {add,subtract,multiply,divide,bignumber} from 'mathjs'

4、封装

  1. //新建utils.js 对公共方法进行封装
  2. import {add,subtract,multiply,divide,bignumber} from 'mathjs'
  4. const math = {
  5.   //加法
  6.   add(a,b){
  7.     return add(bignumber(a), bignumber(b));
  8.   },
  10.   //减法
  11.   subtract(a,b){
  12.     return subtract(bignumber(a), bignumber(b));
  13.   },
  15.   // 乘法
  16.   multiply(a,b){
  17.     return multiply(bignumber(a), bignumber(b));
  18.   },
  20.   // 除法
  21.   divide(a,b){
  22.     return divide(bignumber(a), bignumber(b));
  23.   }
  24. }
  26. export { math }
  28. //组件中使用
  29. import { math } from '@/utils/math'
  30. math.add(this.a,this.b)

5、附录

vue组件使用实例

  1. <template>
  2.   <div id="app">
  3.     <div>
  4.       <input type="text" v-model="a"> +
  5.       <input type="text" v-model="b"> =
  6.       {{add}}
  7.     </div>
  8.     <div>
  9.       <input type="text" v-model="a"> -
  10.       <input type="text" v-model="b"> =
  11.       {{subtract}}
  12.     </div>
  13.     <div>
  14.       <input type="text" v-model="a"> *
  15.       <input type="text" v-model="b"> =
  16.       {{multiply}}
  17.     </div>
  18.     <div>
  19.       <input type="text" v-model="a"> /
  20.       <input type="text" v-model="b"> =
  21.       {{divide}}
  22.     </div>
  23.   </div>
  24. </template>
  26. <script>
  27. import { math } from '@/utils/math'
  28. export default {
  29.   name: 'home',
  30.   computed:{
  31.     add(){
  32.       return math.add(this.a,this.b)
  33.     },
  34.     subtract(){
  35.       return math.subtract(this.a,this.b)
  36.     },
  37.     multiply(){
  38.       return math.multiply(this.a,this.b)
  39.     },
  40.     divide(){
  41.       return math.divide(this.a,this.b)
  42.     }
  43.   },
  44.   data() {
  45.     return {
  46.       a:1,
  47.       b:2,
  48.     }
  49.   }
  50. }
  51. </script>
  53. <style>
  54. #app {
  55.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  56.   -webkit-font-smoothing: antialiased;
  57.   -moz-osx-font-smoothing: grayscale;
  58.   text-align: center;
  59.   color: #2c3e50;
  60.   margin-top: 60px;
  61. }
  63. </style>

math.js官网

https://mathjs.org/docs/getting_started.html