VUE中常用的十大過濾器

2022-06-08 10:15:07 字數 4383 閱讀 2133

在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中我們是通過函式的形式來完成的。而在模版中,則是通過過濾器來實現的。過濾器使用的是 來使用。將傳進來的引數新增到原來的值上面。這個過濾器會嘗試將值和引數轉換成整形然後進行相加。如果轉換成整形過程中失敗了,那麼會將值和引數進行拼接。...