(编辑:jimmy 日期: 2024/10/30 浏览:2)
一、本节说明
在使用插值表达式的时候,我们通常会有一种需求,就是将数据进行二次的格式化。VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入。
所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}}
除了在插值表达式中可以使用过滤器,在后文中将要学习到的v-bind指令中也可以使用过滤器。用法是一致的,到时候我们再看一看。
二、 怎么做
全局过滤器(定义一个用于做日期格式化的过滤器)
{{message|date-format('yyyy-mm-dd')}}
而言,参数input=message,即“|”管道符之前的数据输出,作为过滤器的输入数据。。{{message|date-format(message,'yyyy-mm-dd')}}
写法是错误的。${变量名}
括起来。这个用法也是参考了linux的shell脚本的实现。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实现数据格式化的资料请关注其它相关文章!