过滤器
全局过滤器
vue.filter("过滤器的名字",(data)=>{
data 要过滤的数据
数据处理
返回数据 //返回什么页面就显示什么
})
使用过滤器
{{过滤数据 | 过滤器的名字}}
试一试:获取时间
{{time|timefilter}} //2020.2.20
{{time|timefilter('/')}} //2020/2/20
{{time|timefilter('-')}} //2020-2-20
Vue.filter("timefilter",(data,tag)=>{
//data 数据 tag 参数
var tag = tag || '.';
let y = (new.Date()).getFullYear()
let m = (new.Date()).getMonth()+1
let d = (new.Date()).getDate()
return `${y}${tag}${m}${tag}${d}`
})
局部过滤器
- 与全局过滤器使用方法一样,只不过定义在filters属性里
filters:{
//定义了一个名字为timefilter的过滤器.第一个参数即是你要过滤的值
timefilter(data,tag)=>{
let y = (new.Date()).getFullYear()
let m = (new.Date()).getMonth()+1
let d = (new.Date()).getDate()
return `${y}${tag}${m}${tag}${d}` //返回的内容,即是你过滤完成的值。
})
}
案例:过滤图片地址
数组:7d8a867c870b22bc74c87c348b75528djpeg
过滤成:https://cube.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg
所用到字符串的截取与拼接方法
Vue.filter("myfilter", (data) => {
let a = data.substr(0,1);
let b = data.substr(1,2);
let c = data.slice(3);
let path = `https://cube.elemecdn.com/${a}/${b}/${c}.jpeg`;
return path;
}
)