vue中的过滤器

最新推荐文章于 2025-06-10 09:41:39 发布

A~小鲸喜

最新推荐文章于 2025-06-10 09:41:39 发布

阅读量213

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/Sun_Maple_jw/article/details/120070715

本文介绍了Vue.js中的过滤器功能，包括如何在插值表达式和v-bind中使用，定义私有和全局过滤器，连续调用过滤器，以及过滤器的参数传递。重点讲解了过滤器的定义方式和其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

<!-- 在双花括号中通过"管道符"调用，调用maple 过滤器，对messahe的值进行格式化 -->
<p> {{ message | maple }} </p>
<!-- 在v-bind中通过"管道符"调用，调用sun过滤器，对rawid 的值进行格式化 -->
<div v-bind:id="rawid | sun"></div>

2.1 定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

filters: {
        // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
    capi(val) {
        const first = val.charAt(0).toUpperCase()
        const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
        return first + other
    }
}

2.2 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

// 使用 Vue.filter() 定义全局过滤器
    Vue.filter('capi', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other + '~~~'
    })

2.3 连续调用多个过滤器

过滤器可以串联地进行调用，例如：

<!-- 把 message 的值，交给 filterA 进行处理 -->
<!-- 把 filterA 处理的结果，再交给 filterB 进行处理 -->
<!-- 最后把 filterB 处理的结果，作为最终的值渲染到页面上 -->
{{ message | filterA | filterB }}

2.4 过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：

<!-- arg 是传递给capi的参数 -->
<p>{{ message | capi(arg) }}</p>


// 第一个参数：永远是"管道符"前面待处理的值
// 从第二个参数开始，才是调用过滤器是传递过来的参数
Vue.filter('capi', function (str,arg) {
    //代码逻辑
})