vue 过滤器

过滤器

• 作用：对数据进行处理

全局过滤器

• 使用方法

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;
            }
        )