Vue.filter

Vue.filter 的原理是通过调用 Vue 的全局 API $options.filters 来注册过滤器。当调用了 Vue.filter 方法定义一个过滤器后，该过滤器将被添加到 $options.filters 对象中。

在编译模板时，Vue 会对模板中使用到的过滤器进行解析和处理。当解析到一个过滤器表达式时，Vue 会在 $options.filters 对象中查找对应的过滤器函数，并将当前值作为第一个参数传入过滤器函数中进行处理。处理完成后，Vue 将过滤器函数的返回值作为最终的结果进行渲染。

过滤器函数接受一个参数，即需要处理的值，可以对该值进行任何操作和处理，并返回处理后的结果。过滤器函数可以在模板中使用参数进行配置，如 {{ value | filter(parameter) }}，此时参数会作为函数的第二个参数传入过滤器函数中。

在实际运用中，过滤器可以用于对数据进行格式化、转换、筛选等操作，方便在模板中对数据展示进行处理。

Vue.filter( id, [definition] )
参数：
{string} id
{Function} [definition]

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

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

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 在这个例子中，filterA 被定义为接收单个参数的过滤器函数，
// 表达式 message 的值将作为参数传入到函数中。
// 然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，
// 将 filterA 的结果传递到 filterB 中。
{{ message | filterA | filterB }}

//这里，filterA 被定义为接收三个参数的过滤器函数。
//其中 message 的值作为第一个参数，
//普通字符串 'arg1' 作为第二个参数，
//表达式 arg2 的值作为第三个参数。
{{ message | filterA('arg1', arg2) }}