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通过过滤器实现数据格式化的详细内容,更多关于vue实现数据格式化的资料请关注猪先飞其它相关文章!
相关文章
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20