Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker 诊断工具


Vue filters 过滤器

Vue 大约 1472 字

说明

只适用于Vue2Vue1,在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>
阅读 688 · 发布于 2023-01-04

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

扫描下方二维码关注公众号和小程序↓↓↓

扫描二维码关注我
昵称:
随便看看 换一批