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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
js function使用心得
May 10 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
理解Javascript的call、apply
Dec 16 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
Vue中props的使用详解
Jun 15 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python的id()函数解密过程
2012/12/25 Python
Python struct模块解析
2014/06/12 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
python实现多线程抓取知乎用户
2016/12/12 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python super函数使用方法详解
2020/02/14 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
优秀少先队工作者事迹材料
2014/05/13 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
工程合作意向书范本
2015/05/09 职场文书
青春雷锋观后感
2015/06/10 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js