vue过滤器的使用
前言
提示:我们有时候要将费用格式化,但是一个一个的去格式化就太麻烦了,这是就可以使用vue中的过滤器来定义格式。
一、编写金额固定格式代码?
1.新建过滤器文件
在src文件夹下面新建plugin文件夹,再新建js文件filters
在filters中写入一下代码:
// 定义金额格式过滤器
export function moneyFilter(cost) {
var money = Number(cost).toFixed(2).split(".");
money[0] = money[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return money.join(".");
}
二、过滤器的使用
1.定义全局过滤器
找到main.js文件,定义全局过滤器,代码如下:
// 定义全局过滤器
import * as filters from './plugin/filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
});
2.使用方式
使用时直接用 “{{字段 |moneyFilter}}”,如下:
{{ item.policyPremium | moneyFilter }}元
结果如下: