Vue 过滤器怎么使用

在 Vue 中，过滤器是一种简单的函数，可以用来改变数据的呈现方式。它们经常用于格式化文本、日期、数字等。Vue 提供了一些内置的过滤器，同时也支持自定义过滤器。

内置过滤器

Vue 提供了一些内置的过滤器，如下表：

过滤器	描述
capitalize	把字符串转换成首字母大写
uppercase	把字符串转换成全部大写
lowercase	把字符串转换成全部小写
currency	格式化货币，可以自定义符号和小数位数
pluralize	将单词转换成复数形式

使用内置的过滤器非常简单，只需要在模板中使用 {{ data | filter }} 的语法即可。例如：

html复制代码
<p>{{ message | capitalize }}</p>

自定义过滤器

除了使用内置的过滤器外，我们还可以自定义过滤器。自定义过滤器的语法为：

javascript复制代码
Vue.filter('filterName', function(value) {
  // 处理数据并返回处理后的结果
});

其中，filterName 表示过滤器的名称，function 中的 value 参数表示要处理的数据。

例如，我们可以自定义一个过滤器用来格式化日期：

html复制代码
<p>{{ date | formatDate }}</p>

javascript复制代码
Vue.filter('formatDate', function(value) {
  const date = new Date(value);
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  month = month < 10 ? '0' + month : month;
  let day = date.getDate();
  day = day < 10 ? '0' + day : day;
  return `${year}-${month}-${day}`;
});

这个过滤器会将传入的日期格式化成 yyyy-mm-dd 的形式。

过滤器链

我们还可以将多个过滤器组合起来使用，称为过滤器链。过滤器链的语法为：

html复制代码
{{ data | filter1 | filter2 | filter3 }}

例如：

html复制代码
<p>{{ message | capitalize | pluralize }}</p>

这个例子中，首先会将 message 中的内容转换成首字母大写的形式，然后再将单词转换成复数形式。

总结

Vue 的过滤器功能非常强大，既支持内置的过滤器，也支持自定义过滤器和过滤器链。通过合理地使用过滤器，我们可以轻松实现数据的格式化和呈现。