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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。