全局過濾器
1.mian.js同級目錄下新建文件夾filter，文件夾下新建filter.js：
? let transformMobile=val=>{? ? //手機號碼隱藏中間4位
? ???? let mobile = val + '';
? ???? if (mobile && mobile.length === 11) {
? ? ???? const reg = /^(\d{3})\d{4}(\d{4})$/
? ? ???? return mobile.replace(reg, '$1****$2')
? ???? } else {
? ? ???? return val
? ???? }
? };
? export { transformMobile}
2.mian.js引入：
? import * as custom from './filter/filter';
? Object.keys(custom).forEach(key => {
? ? Vue.filter(key, custom[key])
? });
3.組件使用：
<div?@click.stop>
? ?<a?:href="'tel:'?+?mobile"> {{mobile|?transformMobile}} </a>
</div>
data(){
??????return{
????????mobile:?'13612345678',
??????}
????}
注：以上示例顯示結(jié)果： 136****5678
組件內(nèi)部過濾器
<template>
? ? <div><span>{{type?|?transformType(typeList)}}</span></div>
??</template>
<script>
??export?default?{
????data(){
??????return{
????????type:?1,
????????typeList:[????//接口獲取的類型列表
????????????{typeName:'中國郵政',?code:0},
????????????{typeName:'順豐快遞',?code:1},
????????????{typeName:'中通快遞',?code:2}
????????],
??????}
????},
????filters:?{
????????transformType(val,typeList){
????????????if(typeList.length>0){
????????????????for(let?i=0;?i<typeList.length;?i++){
????????????????????if?(typeList[i].code?==?val)?{
????????????????????????return??typeList[i].typeName;
????????????????????}
????????????????}
????????????}else?{
????????????????return?'未知'
????????????}
????????}
????},
??}
??</script>
注：以上示例顯示結(jié)果：?順豐快遞
