详解vue如何通过过滤器实现数据格式化-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

创新互联公司制作网站网页找三站合一网站制作公司,专注于网页设计,成都做网站、成都网站建设,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为成百上千服务,创新互联公司网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

小编这次要给大家分享的是详解vue如何通过过滤器实现数据格式化，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

一、本节说明

在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化。VUE的过滤器的实现参考了linux的shell命令的管道的实现原理：即上一个命令的输出，是下一个命令的输入。
所以过滤器可以串接使用：{{数据 | 过滤器A | 过滤器B}}

除了在插值表达式中可以使用过滤器，在后文中将要学习到的v-bind指令中也可以使用过滤器。用法是一致的，到时候我们再看一看。

二、 怎么做

全局过滤器（定义一个用于做日期格式化的过滤器）

• 过滤器的第一个参数是固定的，就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言，参数input=message，即“|”管道符之前的数据输出，作为过滤器的输入数据。
• 过滤器除了第一个参数固定是“管道输出”，其他的参数根据需要自定义。在传参的时候，从第二个参数开始传入即可。{{message|date-format(message,'yyyy-mm-dd')}}写法是错误的。
• 其中let是ES6中定义变量的语法，类似于var，但在块作用域方面有不同之处。可以自行搜索深入学习
• 在上文代码中使用了 template string语法，使用该语法可以有效的解决，字符串与变量繁琐的拼接问题。“`”这个字符是键盘在英文输入法环境中，ESC下方的那个按键。
• 在template string语法中，变量用${变量名}括起来。这个用法也是参考了linux的shell脚本的实现。
• 使用ES6中的字符串新方法String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；padStart(2,'0')表示如果字符串长度不足2位，则左补0，补足到长度为2.
   

三、 效果

过滤器的使用方法:

{{message}}
{{message|date-format('yyyy-mm-dd')}}

本文标题：详解vue如何通过过滤器实现数据格式化-创新互联
文章来源：http://cdkjz.cn/article/gdgpc.html