过滤器（Filters）

过滤器（Filters）是 Vue 提供的功能，主要用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器添加在 JavaScript 表达式的尾部，由“管道符”进行调用。 下面是一个简单的示例：

<!-- 插值表达式中使用过滤器，将 message 转换为大写 -->
{{ message | capitalize }}

<!-- v-bind 属性绑定中使用过滤器，将 rawId 格式化为特定格式 -->
<div v-bind:id="rawId | formatId"></div>

1. 定义私有过滤器

在创建 Vue 实例期间，可以在 filters 节点中定义过滤器。在 filters 节点下定义的过滤器称为“私有过滤器”，它只能在当前 Vue 实例所控制的 DOM 区域内使用，示例如下：

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    message: 'hello world' // 定义一个 message 数据
  },
  filters: {
    // 定义一个过滤器 'capitalize'，将字符串的首字母大写
    capitalize: function (value) {
      if (!value) return '' // 如果 value 为空，则返回空字符串
      value = value.toString() // 将 value 转换为字符串
      return value.charAt(0).toUpperCase() + value.slice(1) // 将首字母大写并拼接剩余字符串
    }
  }
})

上面代码定义了一个 Vue 实例，包含一个名为 capitalize 的过滤器，用于将字符串的首字母大写。过滤器的 value 参数接收的是绑定数据的值，例如上例中的 message。

2. 全局过滤器

如果希望在多个 Vue 实例之间共享过滤器，可以定义全局过滤器：在 Vue.js 中，全局过滤器是通过 Vue.filter 方法定义的，可以在任何 Vue 实例中使用。语法格式如下：

Vue.filter('filterName', function (value) {
  // 对传入的 value 进行处理
  return processedValue
})

• filterName：过滤器的名称，在模板中使用时以 | filterName 形式调用。
• value：传入过滤器的值。
• processedValue：过滤器处理后的返回值。

示例如下：

// 定义一个全局过滤器 'reverse'，将字符串反转
Vue.filter('reverse', function (value) {
  if (!value) return '' // 如果 value 为空，则返回空字符串
  return value.split('').reverse().join('') // 将字符串反转
})

// 创建第一个 Vue 实例
new Vue({
  el: '#app1', // 绑定 Vue 实例的根元素
  data: {
    message: 'hello' // 定义一个 message 数据
  }
})

// 创建第二个 Vue 实例
new Vue({
  el: '#app2', // 绑定 Vue 实例的根元素
  data: {
    message: 'world' // 定义一个 message 数据
  }
})

上面代码定义了一个全局过滤器 reverse，可以在所有 Vue 实例中使用。全局过滤器函数的第一个参数 value 接收的是绑定数据的值，例如上例中的 message。

3. 连续调用多个过滤器

过滤器可以串联使用，多个过滤器之间用管道符 | 连接。示例如下：

<!-- 先将 message 转换为大写，再将字符串反转 -->
{{ message | capitalize | reverse }}

具体代码如下：

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    message: 'hello' // 定义一个 message 数据
  },
  filters: {
    // 定义一个过滤器 'capitalize'，将字符串的首字母大写
    capitalize: function (value) {
      if (!value) return '' // 如果 value 为空，则返回空字符串
      value = value.toString() // 将 value 转换为字符串
      return value.charAt(0).toUpperCase() + value.slice(1) // 将首字母大写并拼接剩余字符串
    },
    // 定义一个过滤器 'reverse'，将字符串反转
    reverse: function (value) {
      if (!value) return '' // 如果 value 为空，则返回空字符串
      return value.split('').reverse().join('') // 将字符串反转
    }
  }
})

4. 过滤器传参

过滤器本质上是 JavaScript 函数，可以接收参数。传参格式如下：

<!-- 调用 slice 过滤器，并传递参数 0 和 5 -->
{{ message | slice(0, 5) }}

示例代码如下：

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    message: 'hello world' // 定义一个 message 数据
  },
  filters: {
    // 定义一个过滤器 'slice'，截取字符串的部分内容
    slice: function (value, start, end) {
      if (!value) return '' // 如果 value 为空，则返回空字符串
      return value.slice(start, end) // 截取字符串从 start 到 end 的部分
    }
  }
})

在模板中使用该过滤器：

<!-- 使用 slice 过滤器截取字符串的前五个字符 -->
{{ message | slice(0, 5) }}

上面代码先应用 capitalize 过滤器将首字母大写，然后使用 slice 过滤器截取字符串的前五个字符。

5. 过滤器的兼容性

过滤器仅在 Vue 2.x 和 1.x 中受支持，在 Vue 3.x 版本中剔除了过滤器相关的功能。在企业级项目开发中：

• 如果使用的是 2.x 版本的 Vue，则依然可以使用过滤器功能。
• 如果项目已经升级到了 3.x 版本的 Vue，官方建议使用计算属性或方法代替被剔除的过滤器功能。

具体的迁移指南，请参考 Vue 3.x 的官方文档 (opens new window)给出的说明。

6. 综合示例

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    message: 'hello world' // 定义一个 message 数据
  },
  filters: {
    // 定义一个过滤器 'capitalize'，将字符串的首字母大写
    capitalize: function (value) {
      if (!value) return '' // 如果 value 为空，则返回空字符串
      value = value.toString() // 将 value 转换为字符串
      return value.charAt(0).toUpperCase() + value.slice(1) // 将首字母大写并拼接剩余字符串
    },
    // 定义一个过滤器 'slice'，截取字符串的部分内容
    slice: function (value, start, end) {
      if (!value) return '' // 如果 value 为空，则返回空字符串
      return value.slice(start, end) // 截取字符串从 start 到 end 的部分
    }
  }
})

在模板中使用该过滤器：

<!-- 插值表达式中使用过滤器，先将首字母大写，再截取前五个字符 -->
{{ message | capitalize | slice(0, 5) }}

上面代码先应用 capitalize 过滤器将首字母大写，然后使用 slice 过滤器截取字符串的前五个字符。