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 相关文章推荐
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
ThinkPHP分页实例
2014/10/15 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python实现批量改文件名称的方法
2015/05/25 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
机器学习实战之knn算法pandas
2019/06/22 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python 实现IP子网计算
2021/02/18 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
Python中如何定义一个函数
2016/09/06 面试题
班队活动设计方案
2014/01/30 职场文书
会计专业求职信范文
2014/03/16 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
教师党员承诺书2015
2015/01/21 职场文书
单位政审意见范文
2015/06/04 职场文书
医院病假条怎么写
2015/08/17 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python