vue实现的封装全局filter并统一管理操作示例
本文实例讲述了vue实现的封装全局filter并统一管理操作。分享给大家供大家参考,具体如下:
在前后端分离的项目中,经常会有后台返回的数据需要进过处理才能显示到页面上的场景。
使用最多的场景就是日期和时间的处理,后台一般返回的都是时间戳,那么我们就要对时间戳进行处理。
下面就拿封装全局的处理日期和时间的filter来展示如何vue如何封装全局filter并统一处理。
在src目录下新建filters目录用来专门存放全局过滤器,如果项目的过滤器过多,那么就要按类型分类。
我司的项目需要前台处理的数据不是太多,那么就在filters目录下新建一个index.js来存放所有的过滤器就足够了。
index.js 代码如下:
/* 日期处理 time:源时间戳 type:要处理的格式默认xxxx年xx月xx日 /:xxxx/xx/xx .:xxxx.xx.xx -:xxxx-xx-xx */ exportconstnormalDate=(time,type)=>{ if(time){ vardate=newDate(); date.setTime(time); varyear=date.getFullYear(); varmonth=date.getMonth()+1<10?'0'+(date.getMonth()+1)*1:date.getMonth()+1; varday=date.getDate()<10?'0'+date.getDate():date.getDate(); if(type=='-'){ returnyear+'-'+month+'-'+day; }elseif(type=='/'){ returnyear+'/'+month+'/'+day; }elseif(type=='.'){ returnyear+'.'+month+'.'+day; }else{ returnyear+'年'+month+'月'+day+'日'; } } } /* 时间处理 time:源时间戳 type:要处理的格式默认xxxx年xx月xx日xx:xx:xx /:xxxx/xx/xxxx:xx:xx .:xxxx.xx.xxxx:xx:xx -:xxxx-xx-xxxx:xx:xx */ exportconstnormalTime=(time,type)=>{ if(time){ vardate=newDate(); date.setTime(time); varyear=date.getFullYear(); varmonth=date.getMonth()+1<10?'0'+(date.getMonth()+1)*1:date.getMonth()+1; varday=date.getDate()<10?'0'+date.getDate():date.getDate(); varhours=date.getHours()<10?'0'+date.getHours():date.getHours(); varminutes=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes(); varseconds=date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds(); if(type=='-'){ returnyear+'-'+month+'-'+day+''+hours+':'+minutes+':'+seconds; }elseif(type=='/'){ returnyear+'/'+month+'/'+day+''+hours+':'+minutes+':'+seconds; }elseif(type=='.'){ returnyear+'.'+month+'.'+day+''+hours+':'+minutes+':'+seconds; }else{ returnyear+'年'+month+'月'+day+'日'+''+hours+':'+minutes+':'+seconds; } } }
然后在main.js中引入注册即可使用:
import*asfiltersfrom'./filters' Object.keys(filters).forEach(key=>Vue.filter(key,filters[key]));
在页面中使用:
{{time|normalDate('/')}}
//这样时间戳就会转化为xxxx/xx/xx的格式
希望本文所述对大家vue.js程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。