Vue.js 是一款流行的前端框架，它提供了很多实用的功能来简化开发工作。其中一个非常有用的功能是过滤器，它可以让我们在渲染数据之前对其进行格式化处理。本文将介绍 Vue.js 中过滤器的基本用法和高级用法，并给出示例代码。
基本用法
Vue.js 中的过滤器使用起来非常简单，只需要在模板中使用管道符号（|）来表示要使用过滤器，然后在管道符号后面添加过滤器名称即可。例如：
<!-- 使用 capitalize 过滤器将字符串首字母大写 -->
<div>{{ message | capitalize }}</div>上面的代码会将 message 变量的值传递给名为 capitalize 的过滤器进行处理，然后将处理结果渲染到页面上。
定义过滤器也很简单，只需要在 Vue 实例的 filters 属性中添加一个函数即可。该函数接受一个参数，即要过滤的数据，然后返回处理后的数据。例如：
// 定义 capitalize 过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})上面的代码定义了一个名为 capitalize 的过滤器，它将字符串的首字母大写。我们可以在模板中使用该过滤器来格式化数据。
高级用法
除了基本用法之外，Vue.js 还提供了一些高级的过滤器使用方法，包括传递参数、链式调用和全局过滤器等。
传递参数
有些情况下，我们需要在过滤器中传递参数来进行更加灵活的处理。Vue.js 允许我们在模板中使用冒号（:）来传递参数。例如：
<!-- 使用 currency 过滤器将数字转换为货币格式 -->
<div>{{ price | currency('￥') }}</div>上面的代码会将 price 变量的值传递给名为 currency 的过滤器进行处理，并且还会传递一个参数 '￥' 表示货币符号。我们可以在过滤器函数中接收这些参数，并进行相应的处理。
// 定义 currency 过滤器
Vue.filter('currency', function (value, symbol) {
if (!value) return ''
return symbol + parseFloat(value).toFixed(2)
})上面的代码定义了一个名为 currency 的过滤器，它将数字转换为货币格式，并且可以接收一个参数表示货币符号。我们可以在模板中使用该过滤器来格式化数据。
链式调用
有时候，我们需要对数据进行多次处理，这时候就可以使用链式调用来依次应用多个过滤器。例如：
<!-- 使用 capitalize 和 reverse 过滤器将字符串首字母大写并反转 -->
<div>{{ message | capitalize | reverse }}</div>上面的代码会先将 message 变量传递给 capitalize 过滤器进行处理，然后再将处理结果传递给 reverse 过滤器进行处理，最终渲染到页面上。
我们只需要在模板中使用管道符号（|）来连接多个过滤器即可。
全局过滤器
除了在 Vue 实例中定义过滤器之外，还可以定义全局过滤器，以便在任何组件中都可以使用。我们只需要在 Vue 实例之外定义过滤器即可。例如：
// 定义全局 capitalize 过 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2061) ，转载请注明来源 [https://www.javascriptcn.com/post/2061](https://www.javascriptcn.com/post/2061)