Vue.js每天必学之过滤器与自定义过滤器
基础
类似于自定义指令，可以用全局方法Vue.filter()注册一个自定义过滤器，它接收两个参数：过滤器ID和过滤器函数。过滤器函数以值为参数，返回转换后的值：
Vue.filter('reverse',function(value){
returnvalue.split('').reverse().join('')
})
<!--'abc'=>'cba'--> <spanv-text="message|reverse"></span>
过滤器函数可以接收任意数量的参数：
Vue.filter('wrap',function(value,begin,end){
returnbegin+value+end
})
<!--'hello'=>'beforehelloafter'--> <spanv-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){
varnumber=+val.replace(/[^\d.]/g,'')
returnisNaN(number)?0:parseFloat(number.toFixed(2))
}
})
动态参数
如果过滤器参数没有用引号包起来，则它会在当前vm作用域内动态计算。另外，过滤器函数的this始终指向调用它的vm。例如：
<inputv-model="userInput">
<span>{{msg|concatuserInput}}</span>
Vue.filter('concat',function(value,input){
//`input`===`this.userInput`
returnvalue+input
})
上例比较简单，也可以用表达式达到相同的结果，但是对于更复杂的逻辑——需要多于一个语句，这时需要将它放到计算属性或自定义过滤器中。
内置过滤器filterBy和orderBy，根据所属Vue实例的当前状态，过滤/排序传入的数组。
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。