Vue filters 过滤器

说明

只适用于Vue2、Vue1，在Vue3中已移除。

私有过滤器

插值表达式{{ }}中使用管道符|连接过滤器函数。

filters中定义自定义的过滤器函数。

<div id="app">

    {{ username | customerFilter}}

</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            username: "张三",
        },
        filters: {
            // 形参 val 是管道符 | 前面的变量
            customerFilter(val) {
                // 过滤器中一定要有返回值
                return "私有过滤器 " + val
            }
        }
    });
</script>

全局过滤器

Vue.filter中定义全局过滤器。

全局过滤器和私有过滤器同名时，优先选择私有过滤器。

<div id="app">

    {{ username | customerFilter}}

    <br>

    {{ username | customerFilter | customerFilter2}}

    <br>

    {{ username | customerFilter3('hi', 'hello')}}

</div>

<script>
    // Vue3 中已不支持过滤器
    // 私有过滤器优先级高于全局过滤器
    Vue.filter("customerFilter", function (val) {
        return "全局过滤器 " + val;
    })

    // 过滤器本质是 JS 函数，可以传参，从第二个参数开始，第一参数必须是管道符前的变量
    Vue.filter("customerFilter3", function (val, arg1, arg2) {
        return "全局过滤器3 " + val + arg1 + arg2;
    })

    const vm = new Vue({
        el: "#app",
        data: {
            username: "张三",
        },
        filters: {
            // 形参 val 是管道符 | 前面的变量
            customerFilter(val) {
                // 过滤器中一定要有返回值
                return "私有过滤器 " + val
            },
            customerFilter2(val) {
                return "私有过滤器2 " + val
            }
        }
    });
</script>

</body>
</html>