前端使用bignumber.js,解决浮点和精度问题
vue浮点经度问题
·
介于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
更多推荐
已为社区贡献3条内容
所有评论(0)