集册 Vue.js 教程 自定义过滤器

自定义过滤器

Xebcnor     最近更新时间:2020-08-04 05:37:59

80

基础

和自定义指令类似,你可以用全局方法 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>

双向过滤器

到目前为止,我们使用过滤器都是把来自模型的值在显示到视图之前进行转换。其实我们也可以定义一个过滤器,在把来自视图的值(input 元素)在写回模型之前进行转换:

Vue.filter('check-email', {
  // 这里 read 可选,只是为了演示
  read: function (val) {
    return val
  },
  // write 函数会在数据写入到模型之前被调用
  write: function (val, oldVal) {
    return isEmail(val) ? val : oldVal
  }
})

动态参数

如果一个过滤器参数没有被引号包裹,它会在当前 vm 的数据作用域里当做表达式进行动态求值。此外,过滤器函数的 this 上下文永远是调用它的当前 vm

展开阅读全文