前端使用bignumber.js，解决浮点和精度问题

介于vuecli

代码示例：
第一种方式：引入

// 第一步 在index.html中引入
<script src="https://cdn.bootcdn.net/ajax/libs/bignumber.js/9.0.1/bignumber.min.js"></script>

// 第二步 在vue.config.js文件中配置
configureWebpack: {
    externals: {
        'bignumber': 'BigNumber'
    }
}

// 第三步 在main.js中应用
const BigNumber = require('bignumber');
Vue.use(BigNumber);

// 第四步 在业务代码中使用
test(){
    const n1 = new BigNumber(0.1);
    const n2 = n1.plus(0.2)
    return n2;
},

第二种方式：安装本地

// 第一步 npm install
npm install bignumber.js

// 引入 我是在全局的mixins.js文件中引入的
// 关于mixins可以查看vue官网或者我的另一篇文章
import BigNumber from 'bignumber.js';
let mixins = Vue.mixin({
    methods: {
        $_count(arr, way) {
            // arr代表要进行计算的数值组成的数组 如[1,2,3];
            // way 代表要进行的运算，如times、plus
            let result = 0;
            arr = arr.map(item=>Number(item));
            // 取出第一项作为初始值，依次与后面各项进行运算
            result = arr.splice(0, 1)[0];
            arr.forEach(item=>{
                // 此时的arr已经因为splice方法而失去了第一项
                result = (new BigNumber(result))[way](item);
            })
            return result;
        }
    }
})
export default mixins;

// 第三步 在业务代码中使用

alert(this.$_count([0.1, 0.2], 'plus')); // '0.3'
alert(this.$_count([22, 5, 10], 'minus')); // '7'
alert(this.$_count([-1, 10, 88], 'times')); // '-880'

用法示例

原文连接：https://www.h5w3.com/147824.html