--- title: 06-自定义过滤器:时间格式化举例 publish: true --- ## 前言 > 我们接着上一篇文章01-04来讲。 ### 过滤器的概念 **概念**:Vue.js 允许我们自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示。 ### Vue1.X中的系统过滤器 Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能,这些过滤器称之为系统过滤器。 系统过滤器是Vue1.0中存在的,在Vue2.0中已经删除了。 系统过滤器的使用,可以参考参考文档: Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑,Vue称之为自定义过滤器。我们接下来讲一讲。 ## 自定义全局过滤器 文档地址: ### 全局过滤器的基本使用 我们可以用全局方法`Vue.filter()`自定义一个全局过滤器。这样的话,每一个Vue的对象实例(每一个VM实例)都可以拿到这个过滤器。它接收两个参数:过滤器的名称 、过滤器函数。 比如说,我要将`曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人`这句 msg 中的“单纯”改为“邪恶”。可以这样做: (1)在差值表达式中这样调用: ```html

{{ msg | msgFormat }

``` 上方代码的意思是说: - **管道符前面**的`msg`:要把 `msg` 这段文本进行过滤, - **管道符后面**的`msgFormat`:是通过`msgFormat`这个过滤器进行来操作。 (2)定义过滤器`msgFormat`: ```javascript // Vue.filter 中的第一个参数是过滤器的名称,第二个参数是具体的过滤器函数 // 定义一个 Vue 全局的过滤器,名字叫做 msgFormat Vue.filter('msgFormat', function (myMsg) { // function 的第一个参数指的是管道符前面的 msg // 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则 return myMsg.replace(/单纯/g, '邪恶') }) ``` 上方代码解释: - `Vue.filter(‘过滤器的名称’, 具体的过滤器函数)`中的第一个参数指的就是过滤器的名称(必须和**管道符后面**的名称**完全一致**),第二个参数是具体的过滤器函数 - 过滤器函数function中,第一个参数指的**管道符前面的**msg。 - `replace()`方法是用来做字符串的替换的。第一个参数如果只写成`单纯`,那么就会只修改 msg 中的第一个`单纯`字样。所以这里就用正则去匹配msg 中所有的`单纯`字样。 最终,完整版代码如下: ```html Document

{{ msg | msgFormat }}

``` 网页显示效果如下: ![](http://img.smyhvae.com/20180522_1240.png) ### 给过滤器添加多个参数 上面的举例代码中,`{{ msg | msgFormat }}`中,**过滤器的调用并没有加参数**,其实它还可以添加多个参数。 接下来,我们在上面的举例代码中进行改进。 **改进一**:过滤器加一个参数。如下: 将 msg 这个字符串中的“单纯”改为 xxx 变量。代码如下: ```html Document

{{ msg | msgFormat('xxx') }}

``` ![](http://img.smyhvae.com/20180525_2135.png) 注意代码中那行重要的注释:括号里的参数代表 function中的 arg2。 **改进二**:过滤器加两个参数。如下: ```html Document

{{ msg | msgFormat('【牛x】', '【参数arg3】') }}

``` 效果如下: ![](http://img.smyhvae.com/20180525_2150.png) **改进3:同时使用多个过滤器** 对 msg 同时使用多个过滤器。例如: ```html Document

{{ msg | msgFormat('【牛x】', '【参数arg3】') | myFilter2}}

``` 效果如下: ![](http://img.smyhvae.com/20180525_2200.png) 上方代码中,添加了多个过滤器,实现的思路是:**将 msg 交给第一个过滤器来处理,然后将处理的结果交给第二个过滤器来处理** 。 ### 举例1:时间格式化 ```html Document
{{ time }}
{{ time | datefmt }}
{{ time | datefmt }}
``` 运行效果: ![](http://img.smyhvae.com/20180525_2230.png) ### 举例2:时间格式化 上面的举例1,时间格式化的过滤器,我们还有个更高端的写法:(字符串模板) ```html Document
2018-05-25T14:06:51.618Z
{{ '2018-05-25T14:06:51.618Z' | dateFormat }}
``` 运行结果: ![](http://img.smyhvae.com/20180526_2319.png) 【荐】**举例2的改进**:(字符串的padStart方法使用) 上图中,我们可以看到,箭头处的时间有些问题,比如说,`6`要写成`06`更合适。为了实现这个功能,我们可以这样做: 使用ES6中的字符串新方法 `String.prototype.padStart(maxLength, fillString='')` 或 `String.prototype.padEnd(maxLength, fillString='')`来填充字符串。 `pad`在英文中指的是`补充`。 实现举例如下: ```html Document
2018-05-25T14:06:51.618Z
{{ '2018-05-25T14:06:51.618Z' | dateFormat }}
``` 运行效果如下: ![](http://img.smyhvae.com/20180526_2323.png) `pattern`参数的解释: 在做`if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd')`这个判断时,逻辑是:**先保证pattern参数传进来了,然后继续后面的判断**。 我们不能写成:`if (pattern.toLowerCase() === 'yyyy-mm-dd')`。因为,万一在调用的时候,不传递参数pattern,那么 if语句就相当于`if (undefined.toLowerCase() === 'yyyy-mm-dd')`,就会报错。 当然,ES6中有个新特性叫“默认参数”,我们就可以这样写: ```html Document
2018-05-25T14:06:51.618Z
{{ '2018-05-25T14:06:51.618Z' | dateFormat }}
``` ## 自定义私有过滤器 **私有过滤器**:在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 **举例**:日期格式化 ```html Document
{{ time }}
{{ time | datefmt }}
``` 上面的代码中,我们在vue实例中,通过`filters`关键字,在里面定义了一个局部过滤器`datefmt`。 运行结果: ![](http://img.smyhvae.com/20180405_2038.png) 第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date,说明过滤器是起到了作用的。 ### 总结 过滤器调用的时候,采用的是**就近原则**,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器。 ## axios axios是在Vue中专门用来发送ajax请求的。 但是,axios并不依赖于Vue.js库,而是基于promise的。