在vue的學習過程中,我發現過濾器是乙個很好用的工具,過濾器(filters)來渲染資料是一種很有趣的方式。過濾器不能替代vue中的methods、computed或者watch,不改變真正的data,而只是改變渲染的結果,並返回過濾後的版本。在很多不同的情況下,過濾器都是有用的,比如盡可能保持api響應的乾淨,並在前端處理資料的格式。
在你希望避免重複和連線的情況下,它們也可以有效地封裝成可重用**塊背後的所有邏輯。
下面分享幾個常用的過濾器:
//去除空格 type 1-所有空格 2-前後空格 3-前空格 4-後空格
function
trim(value, trim)
}
//任意格式日期處理
//使用格式:
//}
//}
//} 等
function
formadate(value, fmt) ;
if (/(y+)/.test(fmt)) fmt = fmt.replace(regexp.$1, (date.getfullyear() + "").substr(4 - regexp.$1.length));
for (var k in
o) else
if(o[k] === 1)
else
if(o[k] === 2)
else
if(o[k] === 3)
else
if(o[k] === 4)
else
if(o[k] === 5)
else
if(o[k] === 6)
}else
if (new regexp("(" + k + ")").test(fmt)) }
return
fmt;
}
//字母大小寫切換
/*type
1:首字母大寫
2:首頁母小寫
3:大小寫轉換
4:全部大寫
5:全部小寫
* */
function
changecase(str, type)
else
if (/^([a-z]+)/.test(item))
else
});return
itemtext; }
switch
(type) );
case 2:
return str.replace(/\b\w+\b/g, function
(word) );
case 3:
return
togglecase(str);
case 4:
return
str.touppercase();
case 5:
return
str.tolowercase();
default:
return
str;
}}
//字串迴圈複製,count->次數
function
repeatstr(str, count)
return
text;
}
//字串替換
function
replaceall(str, afindtext, areptext)
//字元替換*,隱藏手機號或者身份證號等
//replacestr(字串,字元格式, 替換方式,替換的字元(預設*))
'18819322663',[3,5,3],0)
//result:188*****663
'asdasdasdaa',[3,5,3],1)
//result:***asdas***
'1asd88465asdwqe3',[5],0)
//result:*****8465asdwqe3
'1asd88465asdwqe3',[5],1,'+')
//result:"1asd88465as+++++"
function
replacestr(str, regarr, type, areptext) )\\w(\\w)'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) (\\w)\\w'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) )'reg = new
regexp(regtext);
var replacecount = this.repeatstr(replacetext, regarr[0]);
return
str.replace(reg, replacecount) }
else
if (regarr.length === 1 && type === 1) $)'reg = new
regexp(regtext);
var replacecount = this.repeatstr(replacetext, regarr[0]);
return
str.replace(reg, replacecount)
}}
//格式化處理字串
'1234asda567asd890')
//result:"12,34a,sda,567,asd,890"
'1234asda567asd890',4,' ')
//result:"1 234a sda5 67as d890"
'1234asda567asd890',4,'-')
//result:"1-234a-sda5-67as-d890"
function
formattext(str, size, delimiter) )+(?!\\w))';
var reg = new regexp(regtext, 'g');
return
str.replace(reg, _delimiter);
}
//現金額大寫轉換函式
//result:"人民幣壹億陸仟捌佰柒拾伍萬貳仟陸佰叄拾貳元整"
//result:"人民幣壹仟陸佰捌拾貳元整"
//result:"欠人民幣壹仟陸佰玖拾叄元整"
function
updigit(n)
s = s || '整';
n =math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++)
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 = math.round(x * 100) / 100;
var s =f.tostring();
var rs = s.indexof('.');
if (rs < 0)
while (s.length <= rs + 2)
return
s;}
django模板中常用的過濾器
在模版中,有時候需要對一些資料進行處理以後才能使用。一般在 python 中我們是通過函式的形 式來完成的。而在模版中,則是通過過濾器來實現的。過濾器使用的是 來使用。比如使 用 add 過濾器,那麼示例 如下 那麼以下就是在開發中常用的過濾器 將傳進來的引數新增到原來的值上面。這個過濾器會嘗試將 ...
vue cli工作中常用的過濾器
在 vue 元件中的使用示例 去除所有空格,過濾器第乙個引數為value常用的過濾器,filter filter.js 去除空格 type 1 所有空格 2 前後空格 3 前空格 4 後空格 function trim value,trim 任意格式日期處理 使用格式 等 function form...
Django 模板中常用的過濾器實現
在模版中,有時候需要對一些資料進行處理以後才能使用。一般在python中我們是通過函式的形式來完成的。而在模版中,則是通過過濾器來實現的。過濾器使用的是 來使用。將傳進來的引數新增到原來的值上面。這個過濾器會嘗試將值和引數轉換成整形然後進行相加。如果轉換成整形過程中失敗了,那麼會將值和引數進行拼接。...