自定义过滤器

基础

类似于自定义指令，您可以使用全局 Vue.filter() 方法注册自定义过滤器，传入一个 **过滤器 ID** 和一个 **过滤器函数**。过滤器函数以一个值作为参数，并返回转换后的值

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

过滤器函数还会接收任何内联参数

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})

<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>

双向过滤器

到目前为止，我们一直在使用过滤器来转换来自模型的值，并在将其显示在视图中之前进行转换。但也可以定义一个过滤器，在将值从视图（输入元素）写回模型之前对其进行转换

Vue.filter('currencyDisplay', {
  // model -> view
  // formats the value when updating the input element.
  read: function(val) {
    return '$'+val.toFixed(2)
  },
  // view -> model
  // formats the value when writing to the data.
  write: function(val, oldVal) {
    var number = +val.replace(/[^\d.]/g, '')
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
  }
})

演示

模型值：{{money}}

动态参数

如果过滤器参数没有用引号括起来，它将在当前 vm 的数据上下文中动态评估。此外，过滤器函数始终使用当前 vm 作为其 this 上下文调用。例如

<input v-model="userInput">
<span>{{msg | concat userInput}}</span>

Vue.filter('concat', function (value, input) {
  // here `input` === `this.userInput`
  return value + input
})

对于上面的这个简单示例，您只需使用表达式就可以实现相同的结果，但对于需要多个语句的更复杂的过程，您需要将它们放在计算属性或自定义过滤器中。

内置的 filterBy 和 orderBy 过滤器都是对传入的数组执行非平凡操作的过滤器，并且依赖于拥有 Vue 实例的当前状态。

← 自定义指令混入 →

指南 2.0 1.0 0.12 0.11

自定义过滤器

基础

双向过滤器

动态参数

指南