×
首页编程语言正文
IT序号网

VUE中常用的十大过滤器

wyy 2021年05月25日 编程语言 1830 0

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

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

VUE中常用的十大过滤器

 

在我看来过滤器的使用，就像是一部电视剧，浙江台播放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 
}


评论关闭
IT序号网
IT序号网 VUE

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！