VUE.js概述——过滤器

过滤器的本质是一个函数，接受管道符前面的值作为初始值，

同时也能接受额外的参数，返回值为经过处理后的输出值。多个过滤器也可以进行串联。

Vue.js提供了全局方法Vue.filter()注册一个自定义过滤器，接受过滤器ID和过滤器函数两个参数。例如：

Vue.filter(‘date’, functiоn(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实例中绑定的数据，称之为动态参数。使用区别就在于不需要用单引号将参数括起来【B站推荐】Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程包含4套优质VUE练手项目，从零开始入门到精通，一套搞定。_哔哩哔哩_bilibili。