vue学习日志过滤器

一、过滤器

　　1.1 概述

　　　　&＃xff08;1&＃xff09;过滤器&＃xff08;Filters&＃xff09;提供了一种 执行文本转换的方法&＃xff0c;比如说都转换成大写字母或者几乎做任何我们想做的事情。

　　　　&＃xff08;2&＃xff09;过滤器既可以在 双花括号插值 中使用&＃xff0c;也可以在 v-bind 指令的 表达式 中使用。

　　1.2 注意

　　　　&＃xff08;1&＃xff09;Vue 中的过滤器 不能替代 methods、computed 或者 watch&＃xff0c;因为过滤器 不改变真正的 data&＃xff0c;而只是改变渲染的结果&＃xff0c;并返回过滤后的版本。

　　　　&＃xff08;2&＃xff09;在很多不同的情况下&＃xff0c;过滤器都是有用的&＃xff0c;比如尽可能保持API响应的干净&＃xff0c;并在前端处理数据的格式。在你希望避免重复和连接的情况下&＃xff0c;他们也可以有效地封装成可重用代码块背后的所有逻辑。

二、默认过滤器

　　如果你不是第一次接触 Vue&＃xff0c;你应该知道 Vue 2.0 以前的版本是有内置的过滤器&＃xff0c;但是他们从 Vue 2.0 版本中删除了。

　　内置的过滤器是有用的&＃xff0c;但它们缺乏纯Javascript的灵活性。当一个内置函数不适合您的需求时&＃xff0c;您最终会重新实现类似功能&＃xff08;在最终代码中&＃xff0c;内置的代码就成无用代码&＃xff0c;死代码&＃xff09;&＃xff0c;或者必须等待Vue更新它们并发布新版本。————Vue的作者

三、定义过滤器

　　Vue 有两种不同的方式注册过滤器&＃xff1a;①本地过滤器②全局过滤器。你可以跨所有组件访问全局过滤器&＃xff0c;而本地过滤器只允许你在其定义的组件内部使用。

　　3.1 本地过滤器

　　　　你可以在一个组件的选项中定义本地的过滤器。

　　3.2 全局过滤器

　　　　在创建Vue 实例之前全局定义过滤器。

四、过滤器串连

　　4.1 说明

　　　　&＃xff08;1&＃xff09;过滤器能够使用管道&＃xff08;|&＃xff09;符号进行串连&＃xff0c;并通过一系列过滤器转换一个值。

　　　　&＃xff08;2&＃xff09;过滤器是 Javascript 函数&＃xff0c;因此可以接收参数。

　　4.2 示例

　　　　&＃xff08;1&＃xff09;英文小写转换大写。

　　本文参考自&＃xff1a;https://segmentfault.com/a/1190000015070338

　　另可参考&＃xff1a;http://www.cnblogs.com/lily1010/p/5837399.html