Vue – 过滤器Filters (已淘汰)

简介

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。在 Vue3 中 Filters 过滤器功能已丢弃。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

使用说明

<p>message 的值是：{{ message | foo }}</p>

定义过滤器

在创建vue 实例期间，可以在filters 节点中定义过滤器

    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js'
      },
      // 过滤器函数，必须被定义到 filters 节点之下
      // 过滤器本质上是函数
      filters: {
        // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
        capi(val) {
          // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
          const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
          return first + other
        }
      }
    })

过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数

注意：因为过滤器必须接收插值数据，因此如果需要在过滤器中传入参数，那么实现涵数形参的接收必须从第二个形参开始，第一个形参将固定为接收插值数据的形参

连续调用过滤器

过滤器可以串联地进行调用

<p>message 的值是：{{ message | foo | foo2 | foo3 | ... }}</p>

全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm 实例所控制的el 区域内使用。 如果希望在多个vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

注意：如果某个VM实例对象中存在和全局过滤器相同名字的过滤器涵数，私有过滤器优先级更高。

兼容性问题

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

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能

如果项目已经升级到了 3.x 版本的vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

具体的迁移指南，请参考vue 3.x 的官方文档给出的说明：

https://v3.vuejs.org/guide/migration/filters.html#migration-strategy