非常教程

Vue 2参考手册

指南 | Guide

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将被评估并作为第三个参数传入。

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录