在 Vue.js 中，过滤器（Filters）是一种用于格式化文本的工具。它们通常用于模板中，以对数据进行一些简单的转换或格式化操作。不过需要注意的是，从 Vue 3 开始，过滤器已经被移除。

Vue 2 中的过滤器用法

全局过滤器

你可以在 Vue 实例创建之前通过 `Vue.filter` 注册一个全局过滤器：

javascript
// 注册一个全局过滤器
Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});

然后你可以在模板中使用这个过滤器：

html
<span>{{ message | capitalize }}</span>

局部过滤器

你也可以在某个组件内注册局部过滤器：

javascript
new Vue({
el: '#app',
filters: {
capitalize: function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});

然后同样可以在模板中使用这个过滤器：

html
<span>{{ message | capitalize }}</span>

过滤器参数

过滤器可以接受参数：

javascript
Vue.filter('formatDate', function (date, format) {
// 根据 format 参数格式化日期
return moment(date).format(format);
});

在模板中使用时：

html
<span>{{ currentDate | formatDate('YYYY-MM-DD') }}</span>

链式过滤器

过滤器支持链式调用：

html
<span>{{ message | filterA | filterB }}</span>

Vue 3 中的过滤器

在 Vue 3 中，过滤器已经被移除。如果你需要实现类似的功能，可以通过计算属性或者方法来完成。

例如，如果你想在 Vue 3 中实现类似 `capitalize` 的功能，可以这样做：

javascript
const app = Vue.createApp({
data() {
return {
message: 'hello world'
};
},
computed: {
capitalizedMessage() {
return this.message.charAt(0).toUpperCase() + this.message.slice(1);
}
}
});

app.mount('#app');

然后在模板中使用计算属性：

html
<span>{{ capitalizedMessage }}</span>

总结来说，在 Vue 2 中，过滤器是一个方便的工具，但在 Vue 3 中已经被废弃，推荐使用计算属性或方法来实现类似的功能。