Vue过滤器 filter
简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。
例如:
1、后台给的时间格式是时间戳,如果需要显示正常时间,就需要通过过滤器把时间戳转为正常格式;
2、价格需要在前面加¥或$时可以通过过滤器的方式实现
3、小数点保留可以通过过滤器的方式
过滤器分类:全局过滤器和局部(组件)过滤器
1、全局过滤器
Vue.filter('globalFilter', function (value) { return value + "!!!" })
2、局部过滤器
filters:{ componentFilter:function(value){ return value + "!!!" } },
3、使用方式
(1)在双花括号插值
{{ '变量名称' | globalFilter }}
( 2 ) 在v-bind表达式中使用
<div v-bind:data="'ok' | globalFilter" ></div>
过滤器带参数
{{ message | filterA(arg1, arg2) }}
filterA的第一个参数是message,依次是‘arg1’,arg2
<div>{{'2018'|filterA('07','17')}}</div>
过滤器
filters:{ filterA(value,arg1,arg2){ return value+'-'+arg1+'-'+arg2; } },
结果:2018-07-17
实例1:保留两位小数点
<div>{{'2018'|decimal(2)}}</div>
过滤器
filters:{ decimal(value,num){ //先转数字类型,字符串没有toFixed函数 return Number(value).toFixed(num); } },
实例2:添加金额符号
<div>{{'100'|money(‘¥’)}}</div>
过滤器
filters:{ decimal(value,str){ //先转数字类型,字符串没有toFixed函数 return str+value; } },
可以通过多个参数实现保留两位小数点的同时添加金额符号
实例3:根据时间戳获取时间
<div class="number-item">默认:输出完整时间:'YYYY-MM-DD h:m:s'</div > <div class="number-item">{{‘1558662393’|timeFormat}}</div > <div class="number-item">输出年-月-日:'YYYY-MM-DD'</div > <div class="number-item">{{‘1558662393’|timeFormat('YYYY-MM-DD')}}</div > <div class="number-item">输出月-日:'MM-DD'</div > <div class="number-item">{{‘1558662393’|timeFormat('MM-DD')}}</div > <div class="number-item">输出月-日 星期:'MM-DD WEEK'</div > <div class="number-item">{{‘1558662393’|timeFormat('MM-DD WEEK')}}</div >
过滤器
filters:{ timeFormat:function(arg,type='YYYY-MM-DD h:m:s'){ if(arg.toString().length==10){ arg=arg*1000; //如果date为13位不需要乘1000 //[js时间戳长度是13位],php,java等时间戳长度为10位 } var date = new Date(arg) var year = date.getFullYear();//获取年 var mouth = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);//月 var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());//日 var hour= (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());//时 var minute = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());//分 var second = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());//秒 var week;//星期 if(date.getDay() == 0) week = "星期日" if(date.getDay() == 1) week = "星期一" if(date.getDay() == 2) week = "星期二" if(date.getDay() == 3) week = "星期三" if(date.getDay() == 4) week = "星期四" if(date.getDay() == 5) week = "星期五" if(date.getDay() == 6) week = "星期六" if(type=='YYYY-MM-DD h:m:s'){ return year+'-'+mouth+'-'+day+' '+hour+':'+minute+':'+second; } if(type=='YYYY-MM-DD'){ return year+'-'+mouth+'-'+day; } if(type=='MM-DD'){ return mouth+'-'+day; } if(type=='MM-DD WEEK'){ return mouth+'-'+day+' '+week; } } }
345浏览量 · 0评论 · 2019-08-08 10:03:18
热门专题
-
01
前端 / HTML超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分
13 篇文章
-
02
前端 / JS/JQjQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
31 篇文章
-
03
前端 / CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
15 篇文章
-
04
前端 / VUE Vue是一套构建用户界面的渐进式框架。 Vue只关注视图层,采用自底向上增量开发的设计。
41 篇文章
-
05
设计 / PhotoshopPhotoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
0 篇文章
-
06
后端 / PHPPHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写。PHP 是一种 HTML 内嵌式的语言
0 篇文章
-
07
设计 / aihtml是超文本标记语言
0 篇文章
-
08
后端 / ThinkPhpThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。遵循Apache2开源协议发布。简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。
5 篇文章
-
09
前端 / 微信小程序微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
3 篇文章
-
10
办公 / WordWord 提供了许多易于使用的文档创建工具,同时也提供了丰富的功能集供创建复杂的文档使用。
2 篇文章
全部评论 0