math.js在Vue项目中的使用和封装

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

安装: npm install mathjs

引入方式一:在main.js中, //网上查询得来

import * as math from 'mathjs'; // 亲测import  math from 'mathjs';不可取,朋友指出是因为math.js源码导出为模块化导出。

Vue.prototype.$math = math; //挂在到原型

之后可以在其他页面中 直接使用 this.$math.add(a,b)加,this.$math.subtract(a,b) 减,this.$math.multiply(a,b)乘,this.$math.divide(a,b)除。 a和b需要使用this.$math.bignumber();格式化一下数据类型。

例如: this.$math.add(this.$math.bignumber(a),this.$math.bignumber(b)); 太繁琐了,所以方便起见将其封装一下子。

引入方法二:在main.js中,    //网上查询得来

const { create, all } = require('mathjs')

const config = {

  number:'BigNumber',

  precision:20  //精度 20。 precision: BigNumbers的最大有效位数。

}

const math = create(all,config);

Vue.prototype.$math = math;

使用同上。

引入方法三:在使用的页面中 

let math = require('mathjs');  //网上查询得来

math.add(math.bignumber(a),math.bignumber(b));

math.subtract(math.bignumber(a),math.bignumber(b));

math.multiply(math.bignumber(a),math.bignumber(b));

math.divide(math.bignumber(a),math.bignumber(b));

封装方法一:先在arithmetic.js(名称随意),中引入math.js(参考上面引入方法,并不用挂载到原型上)

let arithmetic = {

    //加法

    add(a,b){

        return math.add(math.bignumber(a), math.bignumber(b));

    },

    //减法

    subtract(a,b){

        return math.subtract(math.bignumber(a), math.bignumber(b));

    },

    // 乘法

    multiply(a,b){

        return math.subtract(math.bignumber(a), math.bignumber(b));

    },

    // 除法

    divide(a,b){

        return math.subtract(math.bignumber(a), math.bignumber(b));

    }

}

export default arithmetic;

使用:import arithmetic from "../utils/arithmetic";

arithmetic.add(a,b);

arithmetic.subtract(a,b);

arithmetic.multiply(a,b);

arithmetic.divide(a,b); //看起来简洁方便很多。

封装方法二:引入math.js ,在arithmetic.js中

//加法

function add(a,b){

    return math.add(math.bignumber(a), math.bignumber(b));

};

//减法

function subtract(a,b){

    return math.subtract(math.bignumber(a), math.bignumber(b));

};

// 乘法

function multiply(a,b){

    return math.subtract(math.bignumber(a), math.bignumber(b));

};

// 除法

function divide(a,b){

    return math.subtract(math.bignumber(a), math.bignumber(b));

};

module.exports = {

    add,

    subtract,

    multiply,

    divide

}; //模块导出

使用:import {add,subtract,multiply,divide} from "../utils/arithmetic" //按需引入 ,使用哪个方法引入哪个。

add(a,b);

subtract(a,b);

multiply(a,b);

divide(a,b);

以上引入方法,都是网上查资料学习得来,只是总结归纳一下,也希望能帮到其他人,谢谢。

封装方法也是自己学习方法的封装和使用,并练习一下而已。

 

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
非常好的问题!VueJS是一个流行的基于组件化的JavaScript框架,它使前端开发更加快速和简单。关于虚拟列表的组件,通常是通过虚拟化技术来展示大量的数据。这样做的目的是提高网页的性能和用户体验。虚拟化也可以让网页更加灵活,因为它可以在网页上动态添加和删除数据。下面是一个基于Vue JS实现的虚拟列表的组件的伪代码,你可以在它的基础上进行开发: ``` <template> <div class="virtual-list"> <div class="viewport" :style="{ height: viewportHeight + 'px' }" @scroll="onScroll"> <div :style="{ height: virtualHeight + 'px' }"></div> </div> </div> </template> <script> export default { name: 'VirtualList', props: { items: { type: Array, required: true }, itemHeight: { type: Number, required: true }, viewportHeight: { type: Number, default: 200 } }, data () { return { scrollTop: 0 } }, computed: { virtualHeight () { return this.items.length * this.itemHeight }, startIndex () { return Math.floor(this.scrollTop / this.itemHeight) }, endIndex () { return Math.min(this.startIndex + Math.ceil(this.viewportHeight / this.itemHeight), this.items.length) } }, methods: { onScroll (event) { this.scrollTop = event.target.scrollTop } } } </script> <style scoped> .viewport { overflow-y: auto; } </style> ``` 该代码定义了一个名为"VirtualList"的组件,它展示了一个具有虚拟化功能的列表。该组件接收一个名为"items"的数组,这是前端数据。虚拟列表的高度由"itemHeight"属性设置。组件还可以设置视口的高度,这样我们可以确保虚拟化列表不会占据整个页面。该组件主要包含一个名为"viewport"的DIV,该DIV包含一个具有高度为"virtualHeight"的虚拟化div。 您可以按照此示例进行开发自己的虚拟列表组件,并将其用于您的VueJS应用程序

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值