【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 实现的,所以这里它们的作用都只是相对。

Logo

前往低代码交流专区

更多推荐