【vue】06.过滤器

一.什么是过滤器

过滤器（Filters）是一种用于文本转换的简单方法，用于模板中，以格式化显示的数据。过滤器通常用于以下场景：

• 格式化文本（如日期、数字）
• 转换大写或小写
• 简化长文本

二.过滤器的作用

1. 数据格式化：将数据转换为用户友好的格式，例如将日期格式化为特定的日期格式。
2. 文本转换：例如，将文本转换为大写或小写，或者进行简单的文本替换。
3. 数据筛选：尽管这不是过滤器的主要用途，但它们可以用于简单的数据筛选，例如从数组中过滤出特定项。

三.常见用法

1.定义过滤器

过滤器可以在组件的选项中定义，或者在 Vue 实例的全局范围内定义。

全局过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})复制

解释：

Vue.filter('capitalize', function (value) {
  // 定义了一个名为 'capitalize' 的全局过滤器。
  // Vue.filter 方法接受两个参数：
      // 1. 'capitalize' 是过滤器的名称，可以在模板中通过这个名称来使用过滤器。
      // 2. 一个函数，这个函数会接收从模板传递过来的值，并对其进行处理。
 
  if (!value) return ''
  // 如果传入的 value 是假值（比如 null、undefined、空字符串等），
  // 则直接返回一个空字符串。这是为了防止在调用 toUpperCase() 方法时出现错误。
 
  value = value.toString()
  // 将其转换为一个字符串。
 
  return value.charAt(0).toUpperCase() + value.slice(1)
  // 过滤器的核心功能：
  // - value.charAt(0) 获取字符串的第一个字符。
  // - toUpperCase() 将第一个字符转换为大写。
  // - value.slice(1) 获取除了第一个字符之外的所有字符。
  // - 最后，将大写的第一个字符与剩余的字符串片段拼接起来，形成一个新的字符串。
  // 结果是原始字符串的首字母大写，其余字母保持原样。
});复制

局部过滤器：

这个局部过滤器 capitalize 只能在定义它的组件内部使用。

filters: {
  capitalize: function (value) {
     // 这是定义在组件的 `filters` 选项中的一个过滤器。
     // `filters` 是一个对象，其中的每个属性都是一个过滤器函数。
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}复制

如果想在模板中使用这个过滤器，可以像这样：

<template>
  <div>
    <p>{{ someText | capitalize }}</p>
  </div>
</template>复制

在该例子中，someText 是组件的数据属性，当它通过管道符号 | 传递给 capitalize 过滤器时，它的值会被转换为首字母大写的格式，并显示在 <p> 标签内。

局部过滤器的优势在于它们的作用范围仅限于定义它们的组件，有助于避免全局命名空间的污染，并且使得组件更加模块化和可移植。

2.使用过滤器

在模板中，通过管道操作符 | 使用过滤器。

<!-- 在双花括号中 -->
{{ message | capitalize }}
 
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>复制

以下是一些常见的过滤器用法示例：

格式化日期：

Vue.filter('formatDate', function (value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY')
  }
})复制

在模板中使用：

{{ currentDate | formatDate }}复制

转换为大写：

Vue.filter('uppercase', function (value) {
  return value.toUpperCase()
})复制

在模板中使用：

{{ 'hello' | uppercase }}复制

限制文本长度：

Vue.filter('truncate', function (text, length, suffix) {
  if (text.length > length) {
    return text.substring(0, length) + suffix;
  } else {
    return text;
  }
})复制

在模板中使用：

{{ longText | truncate(10, '...') }}复制

3.注意事项

• Vue 3.x 中已经不再推荐使用过滤器，官方建议使用方法或计算属性来替代过滤器。
• 过滤器应该用于简单的文本转换，对于更复杂的数据处理，应该使用计算属性或方法。
• 过滤器是 JavaScript 函数，因此可以接收参数，如上面的 truncate 过滤器所示。

 Vue 3.x 中不再推荐使用过滤器，如果你正在使用 Vue 3.x，建议采用其他方式来实现类似过滤器的功能。