vue2过滤器 filter

提示：vue过滤器在vue3中已经被弃用

1.过滤器 filter 分为全局过滤器和局部（私有）过滤器

局部过滤器的权重高于全局过滤器

eg：先看例子

<div id="app">
        <p> message的值为{{ message | capi }}</p>
    </div>

    <script src="../lib/vue/vue.js"></script>
    <script>
        // vue2全局过滤器(必须写在Vue实列的上面)
        Vue.filter('capi', function(val) {
            const first = val.charAt(0).toUpperCase();
            const other = val.slice(1);
            return first + other + ' 调用了全局过滤器';
        })

        const vm = new Vue({
            el: '#app',

            data: {
                message: 'hello vue.js!'
            },
            // vue2局部过滤器
            filters: {
                capi(val) {
                    const first = val.charAt(0).toUpperCase();
                    const other = val.slice(1);
                    return first + other + ' 调用了局部过滤器';
                }
            }
        })
    </script>

代码如上，效果如下：

2.全局过滤器的定义方法

使用Vue.filter方法

Vue.filter('过滤器名', function(形参){
    操作
    返回所过滤的值
})

3.局部过滤器定义，直接在Vue实例中定义filters对象

注意局部过滤器filters是复数带s,而全局过滤器没有s就是filter,因为全局过滤器可被多个Vue实例共享使用

4.过滤器的使用范围：

{{ }} 插值表达式中或者 v-bind 表达式

5.用法规范

{{ 要被处理的文本 | 过滤器名 }} 

注意 :

01.“|”  小竖线叫做管道符 在它前面的是要被处理的文本参数（作为后面过滤器的实参），在它后面的就是过滤器名。

ps:可串联使用“ | ” 进行多次过滤处理

02.在过滤器函数中一定要有 return 值