VUE ten commonly used filters

Vue in the learning process, I found that the filter is a good use of tools, filters (Filters) to render the data is a very interesting way. Vue filter can not replace the methods, computed or Watch, does not change the real Data, but only change the result of the rendering, and returns the filtered version. In many different situations, filters are useful, such as API response kept clean, and the front-end processing data format.

In case you want to avoid repetition and connected, they can be efficiently packaged into reusable code blocks all the logic behind.

In my opinion the use of filters, like a TV series, Zhejiang and Taiwan ended play 50 sets, 48 sets of Jiangsu Taiwan could play ended on the web iQIYI may become the 60 episodes. This is the effect of the filter, let us be free to make the data for a different treatment, without changing its own, and get the results we want.

Here share a few common filters:

// remove all spaces spaces type 1- 2- 3- spaces before and after the front space after the space 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; 
 } 
}

// arbitrary date format processing 
@ using the format: 
// {{ '2018-09-14 01:05' | formaDate (the MM-dd-YYYY HH: mm: SS)}} 
// {{ '2018-09- 01:05 14 '| formaDate (the MM-YYYY-dd)}} 
// {{' 2018-09-14 01:05 '| formaDate (the MM / dd) and the like}} 
function formaDate (value, FMT) {
  var DATE = new new a date (value);
  var O = {
  "M +": date.getMonth () +. 1, // month 
 "D +": date.getDate (), // day 
 "H +": date.getHours (), / / h 
 "m +": date.getMinutes (), // points 
 "s +": date.getSeconds () ,// sec
 "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', '周一');
 }the else  IF (O [K] === 2 ) { 
 FMT = fmt.replace ( 'W', 'Tuesday' ); 
 } the else  IF (O [K] ===. 3 ) { 
 FMT = fmt.replace ( 'W ',' Wednesday ' ); 
 } the else  IF (O [K] ===. 4 ) { 
 FMT = fmt.replace (' W ',' Thursday ' ); 
 } the else  IF (O [K] ===. 5 ) { 
 FMT = fmt.replace ( 'W', 'Friday' ); 
 } the else  IF (O [K] ===. 6 ) { 
 FMT = fmt.replace ( 'W', 'Saturday' );
 }
 }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;
 }

// capitalization switching 
/ * type 
 . 1: initials 
 2: Home female lowercase 
 3: Conversion Case 
 4: All caps 
 5: all lowercase 
 * * / 
function ChangeCase (STR, type) {
  function ToggleCase (STR) {
  var = itemText "" 
 str.split ( "" ) .forEach (
  function (Item) {
  IF (/ ^ ([AZ] +) / .test (Item)) { 
 itemText + = item.toUpperCase (); 
 } the else  IF ( / ^ ([AZ] +) / .test (Item)) { 
 itemText + = item.toLowerCase (); 
 } the 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;
 }
}

// string loop reproduction, count-> number 
function repeatStr (STR, COUNT) {
  var text = '' ;
  for ( var I = 0; I <COUNT; I ++ ) { 
 text + = STR; 
 } 
 return text; 
}

// string replacement 
function the replaceAll (STR, AFindText, ARepText) { 
 raRegExp = new new the RegExp (AFindText, "G" );
  return str.replace (raRegExp, ARepText); 
}

// character replacement *, hide your phone number or identity card number, etc. 
// ReplaceStr (string, character format, alternative, alternative character (default *)) 
// ecDo.replaceStr ( '18,819,322,663', [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 defined above is treated (string loop reproduction), attention oh 
 IF (regArr.length. 3 && type === === 0 ) { 
 regtext = '({\\ W' + regArr [0 ] + '}) {\\ W' + regArr [. 1] + '} ({\\ W' regArr + [2] + '})' 
 Reg = new new the RegExp (regtext);
  var replaceCount = the this .repeatStr (the replaceText , regArr [. 1 ]);
  return str.replace (Reg, '$. 1' + replaceCount + '$ 2' ) 
 } 
 the else  IF (regArr.length && type === ===. 3. 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);
}

// now the amount of capital conversion function 
// ecDo.upDigit (168 752 632) 
// the Result: "one billion yuan Lu Bai Qi Shi Ba Qian Wu Bai San Shi Er Yuan Lu Wan Erqian whole" 
// ecDo.upDigit (1682) 
// the Result : "RMB one thousand Lu Bai Eryuan whole LXXXII" 
// ecDo.upDigit (-1693) 
// Result: "less Bai Jiu Shi Lu three thousand RMB yuan a whole" 
function upDigit (n-) {
  var fraction = [ 'angle' , 'sub', 'cm' ];
  var digit for = [ 'zero', 'One', 'II', 'three', 'store', 'Wu', 'LU', 'qi', 'split', 'ND' ];
  var Unit = [ 
 [ 'element,' the '', 'one hundred million' ], 
 [ ',' pick up ',' Bai ','Thousand' ] 
 ]; 
 var head = n-<0 'under RMB': 'RMB'? ; 
 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 (. / (Zero) = p.replace * Zero $ /, '') .replace ( / ^ $ /, ' zero') + Unit [0] [I] + S;
  // S = P Unit + [0] [I] + S; 
}
  return head s.replace does + (. / (zero) zero element * / 'meta') .replace (. / (zero) + / g, 'zero'). replace (/ ^ entire $ / 'zero element integral' ); 
}

//保留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;
}

Introducing custom filter

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

VUE ten commonly used filters

Guess you like