全国服务热线:4008-888-888

技术知识

公众号小程序制作公司_vue通过过滤器完成数据格

vue通过过滤器实现数据格式化       这篇文章主要介绍了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.

浏览器显示的效果:

四、 深入:私有过滤器

除了可以定义全局的过滤器,我们还可以定义私有过滤器。但是过滤器这种代码,类似于工具类,我们一般定义为全局的,让它在各个模块、组件里面都可以使用。

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

以上就是vue通过过滤器实现数据格式化的详细内容,更多关于vue实现数据格式化的资料请关注凡科其它



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服