教你VUE中过滤器的2种用法

复制代码1.globalfilter定义起来很简单一个全局过滤器，只需要导出一个方法。使用起来非常简单，只需要在入口文件中全局引入这个过滤器，使用Vue.filter(key,value)导入即可。比如Java后端返回的时间戳是精确到秒的，而JS中的时间戳是以毫秒表示的，你可以定义一个全局的过滤器来转换时间戳：//main.jsimportVuefrom'vue'Vue.filter('millisecond',(value)=>{if(!value)return''value=value.toString()returnvalue.charAt(0).toUpperCase()+value.slice(1)})复制代码，使用时需要的组件用法：复制全局过滤器单挂载代码/***dateTmp:待过滤的值*fmtTmp:传入参数，可接收多个参数*/Vue.filter('dateFormat',function(dateTmp,fmtTmp){letfmt=fmtTmpletdate=dateTmpif(!fmt){fmt='yyyy.MM.dd'}if(!(dateinstanceofDate)){date=newDate(date)}leto={'M+':date.getMonth()+1,//月'd+':date.getDate(),//日'h+':date.getHours()%12==0?12:date.getHours()%12,//小时'H+':date.getHours(),//小时'm+':date.getMinutes(),//分钟's+':date.getSeconds(),//秒'q+':Math.floor((date.getMonth()+3)/3),//Quarter'S':date.getMilliseconds()//毫秒}letweek={'0':'Day','1':'一','2':'二','3':'三','4':'四','5':'五','6':'六'}if(/(y+)/.test(fmt)){fmt=fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length))}if(/(E+)/.test(fmt)){fmt=fmt.replace(RegExp.$1,((RegExp.$1.length>1)?(RegExp.$1.length>2?'week':'week'):'')+week[date.getDay()+''])}for(varkino){if(newRegExp('('+k+')').test(fmt)){fmt=fmt.replace(RegExp.$1,(RegExp.$1.length==1)?(o[k]):(('00'+o[k]).substr((''+o[k]).length)))}}返回嗯});复制代码批量挂载全局filter//定义方法//filters.jsexportfunctionslice(temp,num){returntemp.slice(0,num);}复制代码//Mount//main.jsimport*作为来自“@/assets/js/filters”的过滤器；Object.keys(filters).forEach(key=>{Vue.filter(key,filters[key]);});复制代码//调用复制代码2.组件过滤器组件过滤器比较简单，在对应的组件中定义过滤器即可，但只对本组件有效，比如定义一个首字母大写的过滤器Filter://定义方法exportdefault{filters:{capitalize:function(value){if(!value)return''value=value.toString()returnvalue.charAt(0).toUpperCase()+value.slice(1)}}}复制代码示例示例最后，如果您觉得本文对您有帮助，请点个赞。或者可以加入我的开发交流群：1025263163互相学习，我们会有专业的技术解答。如果您觉得这篇文章对您有用，请给我们的开源项目一个小星星：http://github。crmeb.net/u/defu非常感谢！完整源码下载地址：https://market.cloud.tencent....PHP学习手册：https://doc.crmeb.com技术交流论坛：https://q.crmeb.com