在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>
//这里的意思是前者是要传给过滤器的值,后面是过滤器的名