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>
最终效果: