vue中使用过滤器filter处理浮点数小数位数
项目中,在处理购物车数据时,由于价格往往都是浮点数,而JS中对于小数点的精度是无法保证的,所以计算后的浮点数有时候会出现小数位数太多,并不是我们想要的结果,想到使用toFixed() 方法实现保留一定小数位数。因为购物车、订单页等页面都要用到,所以全局注册过滤器filters。1.vue项目中可能需要用到很多filters,所以在src目录下新建一个common/filter目录,在fil...
项目中,在处理购物车数据时,由于价格往往都是浮点数,而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 异常。
总结:文档真的很重要,一些常见的问题,其实文档中都已经考虑到了。
更多推荐
所有评论(0)