vue通过过滤器实现数据格式化


Posted in Javascript onJuly 20, 2020

一、本节说明

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

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

二、 怎么做

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

vue通过过滤器实现数据格式化

  • 过滤器的第一个参数是固定的,就是输入的数据。对于{{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通过过滤器实现数据格式化的详细内容,更多关于vue实现数据格式化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
JavaScript 继承详解(二)
Jul 13 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
基于node实现websocket协议
Apr 25 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 #Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 #Javascript
简单了解前端渐进式框架VUE
Jul 20 #Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 #Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 #Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 #Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 #Javascript
You might like
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
js+cavans实现图片滑块验证
2020/09/29 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python实现计算器功能
2019/10/31 Python
python批量处理txt文件的实例代码
2020/01/13 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
文明演讲稿范文
2014/05/12 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
九九重阳节标语
2014/10/07 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年项目工作总结
2015/04/29 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
初中地理教学反思
2016/02/19 职场文书