枫树林给大地铺上了红色的地毯，秋风一吹，枫叶发出哗啦啦的响声，好似在鼓掌欢庆这丰收的景象。看，那菊花，它们开得多么热烈！距么旺盛！黄的、红的、白的、紫的……一朵朵，一簇簇，迎着秋风，披着寒霜，争妍斗艳，喷芳吐香，开得到处都是，简直成了一个锦簇的世界。
一、本节说明
在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化。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通过过滤器实现数据格式化的详细内容，更多关于vue实现数据格式化的资料请关注其它相关文章！
