18. Filters（过滤器）

过滤器

Vue.js允许您定义可用于应用常见文本格式的过滤器。过滤器可用于两处：胡子内接 和 表达式（后者在2.1.0+中支持）。过滤器应附加到JavaScript表达式的末尾，用“管道”符号表示：v-bind

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数总是接收表达式的值（前一个链的结果）作为其第一个参数。在这个例子中，capitalize过滤器函数将接收message作为其参数的值。

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

过滤器可以链接在一起：

{{ message | filterA | filterB }}

在这种情况下，filterA用单个参数定义，将接收到的值message，然后filterB函数将被调用，并将结果filterA传递给filterB单个参数。

过滤器是JavaScript函数，因此它们可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里filterA定义为一个带三个参数的函数。值message将被传递到第一个参数。纯字符串'arg1'将filterA作为第二个参数传入，并且表达式的值arg2将被评估并作为第三个参数传入。