vue封装全局过滤器

在写项目的时候我们经常会用到过滤器，把所有的过滤器方法封装在一个文件中，然后导出，简单方便。

项目目录如下：

image.png

2.filters.js里面的代码

//vue定义全局过滤器

// 美元过滤器.
let paiceFilters = value => {
     return '$' + value + '元'
}
// 税率过滤器,加百分号保留两位小数.
let taxFilters = function(value){
     return  parseFloat(value).toFixed(2) + '%'
}

 // 总价过滤器：保留两位小数四舍五入、加千分位符号
let totalPricesFilters = function(value){
    return  value.toFixed(2).replace(/\d{1,3}(?=(\d{3})+\b)/g, '$&,')
}

 // 状态过滤器
let statusFilters = value => {
    return  value == 0 ? '正常' : value == 1 ? '冻结' :'未知'
}

export default { paiceFilters,taxFilters,statusFilters }

3.main.js中的代码：

//全局过滤器
import filters from '@/filters/filters.js'
// 这种方式可以将filters.js中的所有过滤器都注册
for (let key in filters) {
  Vue.filter(key, filters[key])
}

4.在.vue文件中就可以直接使用了

image.png

效果：

image.png