Vue过滤器

最新推荐文章于 2022-09-25 20:33:50 发布

写写代码AAA

最新推荐文章于 2022-09-25 20:33:50 发布

阅读量155

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_28988969/article/details/103780090

版权

Vue 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：

双花括号插值
v-bind 表达式 (后者从 2.1.0+ 开始支持)

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

<body>
    <div id="app">
        <p>
            <!-- 不用传参 -->
            {{message | msgFormat}}
        </p>
        <p>
            <!-- 只用传一个参数 -->
            {{message | msgFormat1("~~~")}}
        </p>
        <p>
            <!-- 过滤器串联 -->
            {{message | msgFormat | msgFormat1}}
        </p>
    </div>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        // 这个形参msg是固定参数, 代表需要过滤的数据
        Vue.filter("msgFormat", function (msg) {
            return msg.replace(/糟糕/g, "美好")
        })

        // 带额外参数的过滤器
        Vue.filter("msgFormat1", function (msg, arg1) {
            return msg.replace(/糟糕/g, "美好" + arg1)
        })

        var vue = new Vue({
            el: "#app",
            data: {
                message: "糟糕的一天, 糟糕的开始"
            },
            // 私有过滤器, 和全局过滤器重名的话, 优先使用私有过滤器
            filters: {
                msgFormat: function (msg) {
                    return msg.replace(/糟糕/g, "美好111")
                }
            }
        })
    </script>
</body>