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 相关文章推荐
JScript的条件编译
May 29 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
JavaScript简介
Feb 15 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
原生js实现表格翻页和跳转
Sep 29 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 字符转义 注意事项
2009/05/27 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
php格式文件打开的四种方法
2018/02/24 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server