Close
升级到 Vue 3 | Vue 2 EOL

指南

过滤器

Vue.js 允许你定义过滤器，这些过滤器可以用来应用常见的文本格式化。过滤器可以在两个地方使用：**花括号插值和 v-bind 表达式**（后者在 2.1.0+ 版本中支持）。过滤器应该附加到 JavaScript 表达式的末尾，用“管道”符号表示

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

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

你可以在组件的选项中定义局部过滤器

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

或者在创建 Vue 实例之前全局定义过滤器

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

new Vue({
  // ...
})

当全局过滤器与局部过滤器具有相同的名称时，将优先使用局部过滤器。

以下是一个使用 capitalize 过滤器的示例

{{ message | capitalize }}

过滤器的函数始终接收表达式的值（前一个链的结果）作为它的第一个参数。在上面的示例中，capitalize 过滤器函数将接收 message 的值作为它的参数。

过滤器可以链接

{{ message | filterA | filterB }}

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

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

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

这里 filterA 被定义为一个接受三个参数的函数。message 的值将被传递给第一个参数。普通字符串 'arg1' 将作为第二个参数传递给 filterA，表达式 arg2 的值将被计算并作为第三个参数传递。

← 插件 单文件组件 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。