Vue使用过滤器费用金额格式

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 }}元

结果如下：

---

总结

1、定义金额格式函数 2、定义全局金额过滤器 3、使用金额过滤器 注意：如果项目过大，大量使用过滤器还是行不通的，数据的事情还是交给后端数据库吧。