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
}