vue中使用过滤器filter处理浮点数小数位数

项目中，在处理购物车数据时，由于价格往往都是浮点数，而JS中对于小数点的精度是无法保证的，所以计算后的浮点数有时候会出现小数位数太多，并不是我们想要的结果，想到使用toFixed() 方法实现保留一定小数位数。

因为购物车、订单页等页面都要用到，所以全局注册过滤器filters。

1.vue项目中可能需要用到很多filters，所以在src目录下新建一个common/filter目录，在filter目录下新建一个filter.js文件，用于统一编写过滤器方法。

let toFixed=(input,num)=>Number(input).toFixed(num)

export default {toFixed}//默认导出

2.在入口文件main.js中引入这个filter文件  (路径以你自己的为准)

//main.js中引入并注册
import filters from "./common/filters/filters"//用于处理浮点数小数位数
//全局方法Vue.filter()统一注册自定义过滤器
Object.keys(filters).forEach(key => {//返回filters对象中属性名组成的数组
  Vue.filter(key, filters[key])
})

3.在组件中使用

{{sum | toFixed(2)}}

注意：必须是Number类型数据才能使用toFixed() 方法，但是vue中获取的数据通常为String格式，所以这里用Number处理一下数据。

关于toFixed() 方法：

查看文档toFixed() 方法可把 Number 四舍五入为指定小数位数的数字，返回数值字符串。

当 num 超出0 ~ 20 之间的值时抛出异常 RangeError。当调用该方法的对象不是 Number 时抛出 TypeError 异常。

总结：文档真的很重要，一些常见的问题，其实文档中都已经考虑到了。