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)}}

去掉了雙向濾波器:

(#39更改# 39，{

函數(shù)(val) {

返回值

},

函數(shù)(val，oldVal)

返回·奧德瓦爾

}

})

1.組件的內(nèi)部過濾(編寫這個例子是為了處理數(shù)據(jù)顯示的樣式，不會改變原始數(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！-添加兩個過濾器，注意不要，注意順序- gt

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

lt/ulgt

lt/divgt

lt/bodygt

ltscriptgt

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

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.在全局過濾器中注冊，過濾轉(zhuǎn)移值，過濾動態(tài)轉(zhuǎn)移。價值

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！-添加兩個過濾器，注意不要，注意順序- gt

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

ltli v-for列表#34gt中的# 34項目{{ | 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號應(yīng)用程序39號，

data(){

返回{

input:5號，

[

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

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

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

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

]

}

},

m:{

},

已安裝(){

}

})

lt/scriptgt

lt/htmlgt

結(jié)果:

3.計算屬性篩選、方法方法篩選

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項目

lthrgt

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

lt/divgt

lt/bodygt

ltscriptgt

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

data(){

返回{

siz:5號，

[

{#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號34號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編號

})

},

addMore(){

五

},

},

已安裝(){

}

})

lt/scriptgt

lt/htmlgt

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

示例1原始文本

var app5新Vu:39號app5 39號，

data:{

[

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

],

k:34號

},

comput:{

函數(shù)(){

// `this `指向虛擬機實例

var鍵

var購物清單

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

return(函數(shù)(項目){

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

})

}

}

})

ltulgt

過濾器鍵輸入類型#34文本# 34v-型號# 34鍵#34gt

ltli v-用于filterShoppingList#34gt中的# 34項目

{{ item }}

lt/ligt

lt/ulgt

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

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