VUE中常用的十大过滤器

在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
}

 

喜欢这篇文章？欢迎打赏~~