【Vue】10分钟带你读懂Vue的过滤器

news2024/12/26 13:46:32

一、什么是过滤器？

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

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>

运行结果

上述代码的含义大致是：

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>

运行结果