过滤器的本质是一个函数,接受管道符前面的值作为初始值,
同时也能接受额外的参数,返回值为经过处理后的输出值。多个过滤器也可以进行串联。
Vue.js提供了全局方法Vue.filter()注册一个自定义过滤器,接受过滤器ID和过滤器函数两个参数。例如:
Vue.filter('date', function(value) {
if(!value instanceof Date) return value;
return value.toLocaleDateString();
})
这样注册之后,我们就可以在vm实例的模板中使用这个过滤器了。
<div>
{{ date | date }}
</div>
var vm = new Vue({
el : '#app',
data: {
date : new Date()
}
});
除了初始值之外,过滤器也能接受任意数量的参数。
双向过滤器
之前提及的过滤器都是在数据输出到视图之前,对数据进行转化显示,但不影响数据本身。Vue.js也提供了在改变视图中数据的值,写回data绑定属性中的过滤器,称为双向过滤器。
动态参数
过滤器除了能接受单引号('')括起来的参数外,也支持接受在vm实例中绑定的数据,称之为动态参数。使用区别就在于不需要用单引号将参数括起来