在 Vue.js 中，filter（过滤器）是一个非常有用的功能，可以处理在前端显示之前需要进行格式化的数据。过滤器可以接收一个值，然后返回一个处理后的值，这个值可以是字符串、数组、对象等等。
基础用法
Vue.js 中 filter 的使用非常简单，在模板中使用 | 符号即可：
<div>{{ message | capitalize }}</div>这里的 capitalize 就是一个过滤器的名称，它会接收 message 变量的值，然后返回一个经过处理后的值。
过滤器函数接收一个参数，即需要处理的值。我们可以在 Vue 实例中定义过滤器：
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})这是一个将字符串中的首字母大写的过滤器，我们可以在模板中使用它：
<div>{{ message | capitalize }}</div>过滤器链
我们可以链接多个过滤器，例如：
<div>{{ message | capitalize | reverse }}</div>这个例子中，capitalize 过滤器会先处理 message 变量的值，然后返回处理后的值，再将这个值传给 reverse 过滤器处理，直到所有过滤器都处理完成。
过滤器参数
除了接收值作为参数之外，过滤器还可以接收额外的参数：
Vue.filter('addSymbol', function(value, symbol) {
return value + symbol
})在模板中使用：
<div>{{ message | addSymbol('-') }}</div>这个例子中，我们将 - 作为 addSymbol 过滤器的参数传递进去。
过滤器的局部注册
除了在 Vue 实例中注册全局的过滤器之外，我们还可以在组件的选项中定义局部的过滤器：
-- -------------------- ---- -------
---------------------------- -
-------- -
----------- --------------- -
-- -------- ------ --
----- - ----------------
------ ----------------------------- - --------------
-
--
--------- -------- ------- - ---------- ----------
----- ---------- -
------ -
-------- ------ ------
-
-
--这个例子中，我们在 myComponent 组件选项中定义了一个 capitalize 过滤器，然后在模板中使用了它。
示例代码
-- -------------------- ---- -------
------------------------ --------------- -
-- -------- ------ --
----- - ----------------
------ ----------------------------- - --------------
--
---------------------------- -
-------- -
---------- --------------- ------- -
------ ----- - ------
-
--
--------- -
-----
-- ------- - ---------- - -------------- --
------
--
----- ---------- -
------ -
-------- ------ ------
-
-
--这个例子中，我们定义了两个过滤器，capitalize 和 addSymbol，然后在 myComponent 组件中使用它们。capitalize 过滤器将字符串的首字母大写，addSymbol 过滤器将字符串末尾添加一个 - 符号。最终的显示效果为：Hello world-。
总结
Vue.js 中的过滤器是一个非常强大、有用的功能，可以轻松地处理前端数据的格式化问题。在 Vue.js 中，我们可以全局注册过滤器，也可以在组件选项中定义局部过滤器，让我们的代码更加简洁、易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad6b4548841e989499019f