VUE filter过滤器和methods方法过滤有什么区别

【filter 过滤器】

vue 对数据提供一个 filter 的处理器，用以在不改变data 的情况下 输出前端需要的数据格式。

1.在一个{{message}}模板中 可以添加多个filter 函数对message 处理

2.在filter中可有传多个参数，但是filters的function的默认第一位参数 为 当前的message的值 value，所以在写函数的时候应注意，自定义的参数是从第二位开始传的。

【类过滤器】

是在method中定义一个过滤方法，return需要的格式的数据展现在页面中。这里的方法是没有默认参数的，和过滤器不一样.

（一）入参
filter：“|” 前面的部分以及作为函数调用的时候传入的实参；

method：传入的实参，当作为时间处理函数时，会被传入 event 对象；

directive：可接受指令名、指令名后面的参数、指令修饰符、指令绑定值等多种“参数”，同时在钩子函数中也能获取到绑定该指令的 DOM 节点等信息。
从这一点上来看， 除了 method 会被传入特殊的 event 对象，其它的内容，这三者其实是可以相互模拟的。

（二）出参
filter：用于替换掉“|”前面的内容；

method：作为返回值，填充在它被执行的地方；

directive：不要求。

（三）实际作用
结合出参、入参，我们分析一下它们的作用：

filter：内容格式化，将输入的数据，按照某种规则进行输出，从这一层讲，感觉叫 formatter 可能更合适；

method：数据、交互等的逻辑处理，相对 formatter 的功能更纯粹，一般结合“数据驱动”的理念，尽量不直接操作 DOM；

directive：DOM 处理中心，拥有相对完整的生命周期，用于控制数据的流转，一般的 DOM 处理等内容都集中到此处。

但实际上，很多内容都是相互交叉的，比如用于处理用户交互的 method 需要通过 v-on 指令来绑定，它本身就是基于 directive 实现的，所以这里它们的作用都只是相对。