Vue过滤器 filter

仅供本人学习使用

过滤器

数据 ---> 过滤器 ---> 新的东西

分类

1、全局过滤器(main.js)

Vue.filter('globalFilter', function(val){
    return val + ' yoyoyo!';
})

2、组件过滤器（局部, 在export default中写）

filters:{
    componentFilter: function(val){
        return val + 'yoyoyo!'
    }
}

注意： 全局注册时是filter, 组件过滤是filters，虽然在组件过滤中写filter不报错，但是过滤器是没有效果的

使用

1、在花括号插值

{{'val' | globalFilter}}

2、在v-bind表达式中使用(从2.10+开始支持)

<div v-bind:data="'val'|globalFilter"></div> 

filter参数写法

第一种

msg->filterA->filterB

总的来说就是 msg 当做参数给 filterA , filterA 的返回值当做参数给 filterB ,最终显示的就是最后一个 filter 也就是 filterB 的返回值。

<div>{{'2022' | filterA | filterB}}</div>

filters: {
    filterA: function(val){
        return val + '年';
    },
    filterB: function(val){
        return val + ' 你好！';
    }
}
// 2022年 你好！

第二种

{{message | filterA(arg1, arg2)}}

嘿嘿，是不是会被骗？ 其实第一个参数是message，也就是 filterA(message, arg1, arg2);

<div>{{'2022' | filterA('04', '26')}}</div>

filters:{
    filterA: function(first, second, third){
        return first + '年' + second + '月' + third + '日';
    }
}
// 2020年04月26日

第三种

{{arg1, arg2 | filterB}}

<div>{{'Hello', 'World' | filterB}}</div>

filters:{
    filterB: function(first, second){
        return first + ' ' + second + '!';
    }
}
// Hello World!

注意： 过滤器中通过this是获取不到 vue 实例的（可以通过参数传进去）。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示