Vue filter使用学习

180 阅读1分钟

1.全局写法

定义:

// 说明 id:过滤器ID 也是后续使用过滤器的key   params过滤器接收的参数 function()过滤器其内具体的实现
Vue.filter('id',function (params) {      
    function()
})

使用:

<div>{{test|filter1(params)}}</div>  // params可以省略
//多个过滤器也可以串行使用
<div>{{test|filter1|filter2|filter3}}</div>

实践:使用过滤器实现手机号中间隐藏4位

首先定义过滤器:

// 手机号中间隐藏4位
Vue.filter('phoneHide',function (phone) {    
let phoneArr = [...phone]; // 将手机号码字符串转换为字符数组    
let resStr = ''    
phoneArr.map((res,index)=>{      
if(index > 2 && index< 7){          
resStr += '*';      
}else {          
resStr += res      }    
})    
return resStr
})

使用过滤器:

<span>{{'17712345678'|phoneHide}}</span>

最终效果:

2.局部写法(待后续补充)