温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中的过滤器如何声明与使用

发布时间:2023-03-11 13:59:00 来源:亿速云 阅读:239 作者:iii 栏目:开发技术

这篇文章主要讲解了“Vue中的过滤器如何声明与使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中的过滤器如何声明与使用”吧!

    一、什么是过滤器

    过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的,因为它所实现的功能也能用计算属性或者函数调用的方式来实现。

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。

    二、过滤器声明与使用

    过滤器应该被添加在JavaScript 表达式的尾部,由“管道符”进行调用。

    过滤器可以用在两个地方:插值表达式和v-bind 属性绑定。

    示例:

    在 {{ }} 中,通过管道符 " | " 调用 capitalize() ,对message进行格式化。

    <p>{{ message | capitalize }}</p>

    在 v-bind中,通过管道符 " | " 调用 formatId() ,对rawId进行格式化。

    <div v-bind:id="rawId | formatId"></div>

    在创建 vue 实例期间,可以在 filters 节点中定义过滤器

    示例:

    const vm = new Vue({
        el: '#app',
        data: {
            ...
        },
        filters: {
            capitalize(str) {
                // 编写过滤的逻辑,即对入参str的处理
                return ...;
            }
        }
    })

    完整案例

    <div id="app">
        <p :title="info | capitalize">{{message | capitalize}}</p>
    </div>
     
    <script src="../../lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vue.js',
                info: 'title info',
            },
            filters: {
                capitalize(str) {
                    // 第一个字母大写,slice(1) 拼接上下标为1之后的字母
                    return str.charAt(0).toUpperCase() + str.slice(1)
                }
            }
        })
    </script>

    输出结果

    Hello vue.js

    str.charAt(0).toUpperCase():表示取下标为0的字母,并将其转为大写。

    str.slice(1):表示从str中提取第2个字符到最后的字符,并返回新字符串。

    三、Vue过滤器的分类

    1.按照作用范围分类

    按照作用范围分类,可以分为全局过滤器和局部过滤器

    (1)全局过滤器:通过Vue.filter()方法定义的过滤器,在整个应用程序中都可以使用。

    (2)局部过滤器:在Vue组件选项中通过filters属性定义的过滤器,只能在该组件及其子组件中使用(就是上述的案例代码)。

    示例代码

    <div id="app1">
        <p :title="info | capitalize">{{message | capitalize}}</p>
    </div>
    <div id="app2">
        <p>{{abc | capitalize}}</p>
    </div>
     
    <script src="../../lib/vue-2.6.12.js"></script>
    <script>
        // 全局过滤器
        Vue.filter('capitalize', (str) => {
            return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
        })
    </script>
    <script>
        const vm1 = new Vue({
            el: '#app1',
            data: {
                message: 'hello vue.js',
                info: 'title info',
            },
            // 私有过滤器,只能被当前 vm 所控制的区域所使用
            filters: {
                capitalize(str) {
                    return str.charAt(0).toUpperCase() + str.slice(1)
                },
            },
        })
    </script>
    <script>
        const vm2 = new Vue({
            el: '#app2',
            data: {
                abc: 'abc'
            }
        })
    </script>

    运行结果

    Vue中的过滤器如何声明与使用

    2.按照使用方式分类

    按照使用方式分类,可以分为普通过滤器和带参数过滤器

    (1)普通过滤器:不带参数的过滤器,可以对数据进行简单的格式化或转换,例如将字符串转换为大写形式,将数字格式化为货币格式等。

    这个也就是我们上述代码的例子。

    (2)带参数过滤器:带有一个或多个参数的过滤器,可以根据参数的不同实现不同的功能,例如根据参数过滤数组,根据参数指定日期格式等。

    除此之外,Vue.js的过滤器还可以按照数据类型进行分类,例如针对字符串、数字、日期、数组等不同的数据类型,提供了不同的过滤器实现。

    具体示例请看第五点。

    四、连续调用多个过滤器

    过滤器可以串联地进行调用

    格式

    {{message|filterA|filterB|filterC}}
    • 把message的值交给filterA进行处理

    • 把filterA处理的结果,再交给filterB进行处理

    • 把filterB处理的结果,再交给filterC进行处理

    • 最后把filterC处理的结果作为最终的值渲染到页面上

    说白了,就是将前者过滤后的值交给后者过滤,直至最后一个!

    完整示例代码

    <div id="app">
        <p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
    </div>
     
    <script src="../../lib/vue-2.6.12.js"></script>
    <script>
        // 全局过滤器
        // 首字母转大写的过滤器
        Vue.filter('capitalize', (str) => {
            return str.charAt(0).toUpperCase() + str.slice(1)
        })
     
        // 定义控制文本长度的过滤器
        Vue.filter('maxLength', (str) => {
            if (str.length <= 10) return str
            return str.slice(0, 10) + '...'
        })
    </script>
     
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vue.js',
                info: 'title info',
            },
        })
    </script>

    运行结果

    Hello vue....

    五、过滤器传参

    过滤器的本质是 JavaScript 函数,因此可以接收参数

    格式如下

    <p>{{ message | filterA(arg1, arg2)}}</p>
     
    Vue.filter('filterA', (msg, arg1, arg2) => {
        // 过滤器逻辑代码
    })

    参数解析

    第一个参数:永远都是“管道符”前面待处理的值

    从第二个参数开始,才是调用过滤器时传递过来的arg1参数 和 arg2参数

    完整示例代码

    <div id="app">
        <p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
    </div>
     
    <script src="../../lib/vue-2.6.12.js"></script>
    <script>
        // 全局过滤器
        // 首字母转大写的过滤器
        Vue.filter('capitalize', (str) => {
            return str.charAt(0).toUpperCase() + str.slice(1)
        })
     
        // 定义控制文本长度的过滤器
        Vue.filter('maxLength', (str, len = 10) => {
            if (str.length <= len) return str
            return str.slice(0, len) + '...'
        })
    </script>
     
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vue.js',
                info: 'title info',
            },
        })
    </script>

    运行结果

    Hel...

    六、过滤器的兼容性问题

    过滤器仅在vue 2.x 和 1.x 中受支持,在 vue 3.x 的版本中剔除了过滤器相关的功能。

    在企业级项目开发中

    如果使用的是2.x 版本的 vue,则依然可以使用过滤器相关的功能

    如果项目已经升级到了3.x 版本的 vue,官方建议使用计算属性或方法代替被剔除的过滤器功能。

    感谢各位的阅读,以上就是“Vue中的过滤器如何声明与使用”的内容了,经过本文的学习后,相信大家对Vue中的过滤器如何声明与使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI