在vue的学习过程中，我发现过滤器是一个很好用的工具，过滤器（Filters）来渲染数据是一种很有趣的方式。过滤器不能替代Vue中的methods、computed或者watch，不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。

在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

在我看来过滤器的使用，就像是一部电视剧，浙江台播放50集结束，江苏台可能播放48集结束，放到网上爱奇艺也可能变成了60集。这就是过滤器的效果，让我们对于一份数据可以随心所欲做不同的处理，同时不改变它本身，又得到我们想要的结果。

下面分享几个常用的过滤器：

//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格function trim(value, trim) { switch (trim) { case 1: return value.replace(/\s+/g, ""); case 2: return value.replace(/(^\s*)|(\s*$)/g, ""); case 3: return value.replace(/(^\s*)/g, ""); case 4: return value.replace(/(\s*$)/g, ""); default: return value; }}

//任意格式日期处理//使用格式：// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd hh:mm:ss) }} // {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd) }} // {{ '2018-09-14 01:05' | formaDate(MM/dd) }} 等function formaDate(value, fmt) { var date = new Date(value); var o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "h+": date.getHours(), //小时 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "w+": date.getDay(), //星期 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) { if(k === 'w+') { if(o[k] === 0) { fmt = fmt.replace('w', '周日'); }else if(o[k] === 1) { fmt = fmt.replace('w', '周一'); }else if(o[k] === 2) { fmt = fmt.replace('w', '周二'); }else if(o[k] === 3) { fmt = fmt.replace('w', '周三'); }else if(o[k] === 4) { fmt = fmt.replace('w', '周四'); }else if(o[k] === 5) { fmt = fmt.replace('w', '周五'); }else if(o[k] === 6) { fmt = fmt.replace('w', '周六'); } }else if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; }

//字母大小写切换/*type 1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写 * */function changeCase(str, type) { function ToggleCase(str) { var itemText = "" str.split("").forEach( function (item) { if (/^([a-z]+)/.test(item)) { itemText += item.toUpperCase(); } else if (/^([A-Z]+)/.test(item)) { itemText += item.toLowerCase(); } else { itemText += item; } }); return itemText; } switch (type) { case 1: return str.replace(/\b\w+\b/g, function (word) { return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase(); }); case 2: return str.replace(/\b\w+\b/g, function (word) { return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase(); }); case 3: return ToggleCase(str); case 4: return str.toUpperCase(); case 5: return str.toLowerCase(); default: return str; }}

//字符串循环复制,count->次数function repeatStr(str, count) { var text = ''; for (var i = 0; i < count; i++) { text += str; } return text;}

//字符串替换function replaceAll(str, AFindText, ARepText) { raRegExp = new RegExp(AFindText, "g"); return str.replace(raRegExp, ARepText);}

//字符替换*，隐藏手机号或者身份证号等//replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)//ecDo.replaceStr('18819322663',[3,5,3],0)//result：188*****663//ecDo.replaceStr('asdasdasdaa',[3,5,3],1)//result：***asdas***//ecDo.replaceStr('1asd88465asdwqe3',[5],0)//result：*****8465asdwqe3//ecDo.replaceStr('1asd88465asdwqe3',[5],1,'+')//result："1asd88465as+++++"function replaceStr(str, regArr, type, ARepText) { var regtext = '', Reg = null, replaceText = ARepText || '*'; //repeatStr是在上面定义过的（字符串循环复制），大家注意哦 if (regArr.length === 3 && type === 0) { regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})' Reg = new RegExp(regtext); var replaceCount = this.repeatStr(replaceText, regArr[1]); return str.replace(Reg, '$1' + replaceCount + '$2') } else if (regArr.length === 3 && type === 1) { regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}' Reg = new RegExp(regtext); var replaceCount1 = this.repeatStr(replaceText, regArr[0]); var replaceCount2 = this.repeatStr(replaceText, regArr[2]); return str.replace(Reg, replaceCount1 + '$1' + replaceCount2) } else if (regArr.length === 1 && type === 0) { regtext = '(^\\w{' + regArr[0] + '})' Reg = new RegExp(regtext); var replaceCount = this.repeatStr(replaceText, regArr[0]); return str.replace(Reg, replaceCount) } else if (regArr.length === 1 && type === 1) { regtext = '(\\w{' + regArr[0] + '}$)' Reg = new RegExp(regtext); var replaceCount = this.repeatStr(replaceText, regArr[0]); return str.replace(Reg, replaceCount) }}

//格式化处理字符串//ecDo.formatText('1234asda567asd890')//result："12,34a,sda,567,asd,890"//ecDo.formatText('1234asda567asd890',4,' ')//result："1 234a sda5 67as d890"//ecDo.formatText('1234asda567asd890',4,'-')//result："1-234a-sda5-67as-d890"function formatText(str, size, delimiter) { var _size = size || 3, _delimiter = delimiter || ','; var regText = '\\B(?=(\\w{' + _size + '})+(?!\\w))'; var reg = new RegExp(regText, 'g'); return str.replace(reg, _delimiter);}

//现金额大写转换函数//ecDo.upDigit(168752632)//result："人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"//ecDo.upDigit(1682)//result："人民币壹仟陆佰捌拾贰元整"//ecDo.upDigit(-1693)//result："欠人民币壹仟陆佰玖拾叁元整"function upDigit(n) { var fraction = ['角', '分', '厘']; var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']; var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟'] ]; var head = n < 0 ? '欠人民币' : '人民币'; n = Math.abs(n); var s = ''; for (var i = 0; i < fraction.length; i++) { s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ''); } s = s || '整'; n = Math.floor(n); for (var i = 0; i < unit[0].length && n > 0; i++) { var p = ''; for (var j = 0; j < unit[1].length && n > 0; j++) { p = digit[n % 10] + unit[1][j] + p; n = Math.floor(n / 10); } s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s; //s = p + unit[0][i] + s; } return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');} 

//保留2位小数function toDecimal2(x){ var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x * 100) / 100; var s = f.toString(); var rs = s.indexOf('.'); if (rs < 0) { rs = s.length; s += '.'; } while (s.length <= rs + 2) { s += '0'; } return s;}

引入自定义过滤器

export{	trim, changeCase, repeatStr, replaceAll, replaceStr, checkPwd, formatText, upDigit, toDecimal2, formaDate}

如果有其他好用的过滤器，欢迎分享