什么是过滤器？-你的模板看起来就清爽多了-重用性可以在多个组件中重复使用减少代码重复

作者：编程小白 | 发布时间：2025-07-02 |

过滤器在Vue.js中是个很实用的功能，就像给文本做美容一样，可以用来美美地格式化文本内容。比如，你可以用它来调整日期格式、大小写、数字显示，甚至截取文本。这样，你的模板看起来就清爽多了。

用起来超级简单，就像这样：在模板里写上管道符（|），然后跟上你想用的过滤器名字。比如，如果你有一个过滤器叫 capitalize，用来把文本的首字母大写，你就可以这样用：

文本 | capitalize

过滤器可以在全局或者局部定义。全局的过滤器就像全球通用的美容工具，任何组件都可以用；局部的过滤器则像是个人专用的化妆包，只在你自己的组件里有效。

在Vue实例中定义：

Vue.filter('name', function(value) {

  // 处理逻辑

  return value;

});

在组件的 filters 选项中定义：

filters: {

  name: function(value) {

    // 处理逻辑

    return value;

  }

}

来看看几个常用的过滤器例子：

使用方法：

日期 | date("yyyy-MM-dd")

使用方法：

长文本 | truncate(10)

使用方法：

金额 | currency

假设我们要展示一个用户列表，并对用户名进行格式化：

用户名 | capitalize

在组件的JavaScript代码中定义过滤器：

filters: {

  capitalize: function(value) {

    return value.charAt(0).toUpperCase() + value.slice(1);

  }

}

在Vue.js中，竖线（|）是用来调用过滤器的。过滤器主要是用来美化和格式化文本的。使用时要注意它的优缺点，避免在大型应用中过度使用，以免影响性能。建议在项目开始时就规划好过滤器的使用，定义好常用的过滤器，这样代码就会更加高效和易于维护。