vue过滤器filter全局配置与使用

在src下面新建文件夹until，并建立filters.js文件
1.定义filters.js文件配置要使用的过滤函数

import dataformat from "./dateformat";

/**
 * @Descripttion: 格式化电话号码
 * @param {tel} 电话号码
 * @return: 13388327924 >>> 133****7924
 */
export function formatPhone(tel) {
  return tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}
// 以数组的形式存储函数
let list = [
   {name:'phoneformat',fn:formatPhone},
];
// 公布并用forEach注入函数到过滤器中
注:这里只是将函数注入到了filter过滤器还没有实例到Vue
export default {
  install(Vue, opt) {
    list.forEach(item => {
      Vue.filter(item.name, item.fn);
    });
  }
};

2.在main.js中导入filters.js文件

import filters from "./utils/filters.js";

Vue.use(filters);

3.就可以正常使用过滤显示数据，并且不会更改源数据

<p>{{ "1212112121" | phoneformat }}</p>
//这里的意思是前者是要传给过滤器的值，后面是过滤器的名