vu:2.0刪除了1.0自帶的所有濾鏡，也就是說，在2.0中，我們需要自己編寫濾鏡。B:2.0過濾器參數(shù)不像以前那樣傳遞，而是以函數(shù)參數(shù)的形式傳遞。下面的例子(后面是具體的例子):之前打過?，F(xiàn)在給打{

vu:2.0刪除了1.0自帶的所有濾鏡，也就是說，在2.0中，我們需要自己編寫濾鏡。

B:2.0過濾器參數(shù)不像以前那樣傳遞，而是以函數(shù)參數(shù)的形式傳遞。下面的例子(后面是具體的例子):

之前打過。

現(xiàn)在給打{{msg | Mimi (# 3912 # 39，# 395 # 39)}}

去掉了雙向?yàn)V波器:

(#39更改# 39，{

函數(shù)(val) {

返回值

},

函數(shù)(val，oldVal)

返回·奧德瓦爾

}

})

1.組件的內(nèi)部過濾(編寫這個(gè)例子是為了處理數(shù)據(jù)顯示的樣式，不會(huì)改變?cè)紨?shù)據(jù))

lt！DOCTYPE htmlgt

lthtml lang#34en#34gt

ltheadgt

ltmeta charset#34UTF-8#34gt

lt meta name # 34 viewport # 34 content # 34 width device-width，initial-scale1.0#34gt

ltmeta http-equiv#34X-UA兼容#34 cont輸入#34ieedge#34gt

lttitlegtfilterlt/titlegt

ltscript src##34gtlt/scriptgt

lt/headgt

ltbodygt

ltdiv id#34app#34gt

ltulgt

lt！-添加兩個(gè)過濾器，注意不要，注意順序- gt

ltli v-for列表#34gt中的# 34項(xiàng)目{ { | filter add 1 | filter add 2 } } lt/ligt

lt/ulgt

lt/divgt

lt/bodygt

ltscriptgt

var vm新Vu:39號(hào)應(yīng)用程序39號(hào)，

data(){

返回{

[

{#34id#·0,#·#3411111#34,#34cont#，

{#34id#·1,#·#3422222#34,#34cont#，

{#34id#·2,#·#3433333#34,#34cont#，

{#34id#·3,#·#3444444#34,#34cont#，

]

}

},

filt:{

filt:{

},

已安裝(){

}

})

lt/scriptgt

lt/htmlgt

2.在全局過濾器中注冊(cè)，過濾轉(zhuǎn)移值，過濾動(dòng)態(tài)轉(zhuǎn)移。價(jià)值

lt！DOCTYPE htmlgt

lthtml lang#34en#34gt

ltheadgt

ltmeta charset#34UTF-8#34gt

lt meta name # 34 viewport # 34 content # 34 width device-width，initial-scale1.0#34gt

ltmeta http-equiv#34X-UA兼容#34 content#34ieedge#34gt

lttitlegtfilterlt/titlegt

ltscript src##34gtlt/scriptgt

lt/headgt

ltbodygt

ltdiv id#34app#34gt

ltulgt

lt！-添加兩個(gè)過濾器，注意不要，注意順序- gt

lt！-過濾傳遞的值，帶引號(hào)的值是字符串，不帶引號(hào)的值是數(shù)字，傳遞的值可以動(dòng)態(tài)綁定- gt

ltli v-for列表#34gt中的# 34項(xiàng)目{{ | filterAdd1(Number(input)，20) | filterAdd2}}lt/ligt

lt/ulgt

ltinput type # 34 text # 34 placeholder # 34 place # 34v-model # 34 input # 34gt

lt/divgt

lt/bodygt

ltscriptgt

(# 39filt:39號(hào)應(yīng)用程序39號(hào)，

data(){

返回{

input:5號(hào)，

[

{#34id#·0,#·#3411111#34,#34cont#，

{#34id#34:1號(hào),#·#3422222#34,#34cont#，

{#34id#·2,#·#3433333#34,#34cont#，

{#34id#·3,#·#3444444#34,#34cont#，

]

}

},

m:{

},

已安裝(){

}

})

lt/scriptgt

lt/htmlgt

結(jié)果:

3.計(jì)算屬性篩選、方法方法篩選

lt！DOCTYPE htmlgt

lthtml lang#34en#34gt

ltheadgt

ltmeta charset#34UTF-8#34gt

lt meta name # 34 viewport # 34 content # 34 width device-width，initial-scale1.0#34gt

ltmeta http-equiv#34X-UA兼容#34 content#34ieedge#34gt

lttitlegtDocumentlt/titlegt

lt！-lt script src # 34 vue . js # 34 gtlt/script gt-gt

ltscript src##34gtlt/scriptgt

lt/headgt

ltbodygt

ltdiv id#34app#34gt

lt lt div @ click # 34 add more # 34gt # 34gt加載更多l(xiāng)t/divgt。

ltulgtltli v-for filter list # 34gt { { item } } lt/ligt lt/ulgt中的# 34項(xiàng)目

lthrgt

ltulgtltli v-for # 34 item in filterlistFun()# 34gt { { item } } lt/ligt lt/ulgt

lt/divgt

lt/bodygt

ltscriptgt

var vm新Vu:39號(hào)應(yīng)用程序39號(hào)，

data(){

返回{

siz:5號(hào)，

[

{#34id#·0,#·#3411111#34,#34cont#，

{#34id#·1,#·#3422222#34,#34cont#，

{#34id#·2,#·#3433333#34,#34cont#，

{#34id#·3,#·#3444444#34,#34cont#，

{#34id#·4,#·#3455555#34,#34cont#，

{#34id#·5,#·#3466666#34,#34cont#，

{#34id#34:6,#34titl:#3477777#34,#34cont#，

{#34id#·7,#·#3477777#34,#34cont#，

{#34id#34:8,#34titl:34888888號(hào)34號(hào)34孔t#，

{#34id#34:9,#34titl:#34000000#34,#34cont#，

{#34id#34:10,#34titl:#34a88888#34,#34cont#，

{#34id#·11,#·#34a22222#34,#34cont#，

{#34id#·12,#·#34a33333#34,#34cont#，

{#34id#·13,#·#34a44444#34,#34cont#，

{#34id#·14,#·#34a55555#34,#34cont#，

{#34id#·15,#·#34a66666#34,#34cont#，

{#34id#34:16,#34titl:#34a77777#34,#34cont#，

{#34id#·17,#·#34a77777#34,#34cont#，

{#34id#·18,#·#34a888888#34,#34cont#，

{#34id#34:19,#34titl:#34a000000#34,#34cont#，

{#34id#·20,#·#34a88888#34,#34cont#

]

}

},

comput:{

filt:{

filterlistFun(val){

讓

return(函數(shù)(數(shù)字){

返回lt編號(hào)

})

},

addMore(){

五

},

},

已安裝(){

}

})

lt/scriptgt

lt/htmlgt

4.使用js中的迭代函數(shù)過濾器。

示例1原始文本

var app5新Vu:39號(hào)app5 39號(hào)，

data:{

[

#34牛奶#34、#34甜甜圈#34、#34餅干#34、#34巧克力#34花生醬# 34、# 34比斯莫爾# 34、# 34比斯莫爾(巧克力味)# 34、# 34比斯莫爾(餅干味)# 34

],

k:34號(hào)

},

comput:{

函數(shù)(){

// `this `指向虛擬機(jī)實(shí)例

var鍵

var購物清單

//使用filter時(shí)，需要注意的是，前面調(diào)用的是需要使用filter的數(shù)組，數(shù)組中的每一項(xiàng)都是傳遞給filter函數(shù)的，也就是說filter中的函數(shù)就是每一項(xiàng)需要做的事情，返回每一個(gè)結(jié)果。

return(函數(shù)(項(xiàng)目){

return()。indexOf(())！-1

})

}

}

})

ltulgt

過濾器鍵輸入類型#34文本# 34v-型號(hào)# 34鍵#34gt

ltli v-用于filterShoppingList#34gt中的# 34項(xiàng)目

{{ item }}

lt/ligt

lt/ulgt

最終效果實(shí)現(xiàn)了根據(jù)關(guān)鍵詞過濾列表的功能。

其他Js迭代方法——filter()，map()，some()，every()，forEach()，lastIndexOf()。