欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js每天必学之过滤器与自定义过滤器

程序员文章站 2023-11-06 17:10:46
基础 类似于自定义指令,可以用全局方法 vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 id 和过滤器函数。过滤器函数以值为参数,返回转换后的值:...

基础

类似于自定义指令,可以用全局方法 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('currencydisplay', {
 // model -> view
 // 在更新 `<input>` 元素之前格式化值
 read: function(val) {
 return '$'+val.tofixed(2)
 },
 // view -> model
 // 在写回数据之前格式化值
 write: function(val, oldval) {
 var number = +val.replace(/[^\d.]/g, '')
 return isnan(number) ? 0 : parsefloat(number.tofixed(2))
 }
})

动态参数

如果过滤器参数没有用引号包起来,则它会在当前 vm 作用域内动态计算。另外,过滤器函数的 this 始终指向调用它的 vm。例如:

<input v-model="userinput">
<span>{{msg | concat userinput}}</span>
vue.filter('concat', function (value, input) {
 // `input` === `this.userinput`
 return value + input
})

上例比较简单,也可以用表达式达到相同的结果,但是对于更复杂的逻辑——需要多于一个语句,这时需要将它放到计算属性或自定义过滤器中。

内置过滤器 filterby 和 orderby,根据所属 vue 实例的当前状态,过滤/排序传入的数组。

本文已被整理到了《vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。