vue2.0里，不再有自帶的過(guò)濾器，需要自己定義過(guò)濾器。定義的方法如下：
注冊(cè)一個(gè)自定義過(guò)濾器，它接收兩個(gè)參數(shù)：過(guò)濾器 ID 和過(guò)濾器函數(shù)。
Vue.filter('filtername',function(value,參數(shù)){ return 參數(shù)+value.split('').reverse().join(''); });function里第一個(gè)參數(shù)value默認(rèn)為使用這個(gè)過(guò)濾器的data對(duì)象內(nèi)的值，在本例中是msg的值'you are mine'。
坑1：第一個(gè)參數(shù)必須為自身的值，后面可以加任意多的參數(shù)。數(shù)序顛倒就會(huì)出錯(cuò)。
下面來(lái)一個(gè)最常見(jiàn)的小例子來(lái)說(shuō)明在使用vue2.0過(guò)濾器并結(jié)合v-text時(shí)遇到的其他的幾個(gè)坑：
需求：在頁(yè)面輸出一段反轉(zhuǎn)順序的字符串。
完整代碼如下：
<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><style></style></head><script src='./vue2.js'></script><script>window.onload=function(){ //類(lèi)似于自定義指令，可以用全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過(guò)濾器，它接收兩個(gè)參數(shù)：過(guò)濾器 ID 和過(guò)濾器函數(shù)。 Vue.filter('reverseString',function(value,myString){ // function里第一個(gè)參數(shù)value默認(rèn)為使用這個(gè)過(guò)濾器的data值，在本例中是msg的值'you are mine'。請(qǐng)注意：第一個(gè)參數(shù)必須為自身的值，后面可以加任意多的參數(shù) return myString+value.split('').reverse().join(''); }); new Vue({ el:'#box', data:{ msg:'you are mine' } });};</script><body><div id='box'> <p>msg is: <br>{{msg}}</p> <hr> <p>reverse msg is: <br>{{msg|reverseString( 'Hello:' )}}</p><!-- 在vue2.0里 過(guò)濾器只能用類(lèi)似函數(shù)的寫(xiě)法reverseString( 'I must tell you:')，括號(hào)內(nèi)是參數(shù)，不同于vue1.0的用空格后加參數(shù)的寫(xiě)法" msg|reverseString 'I must tell you:' " --> <!-- <p v-text="msg|reverseString( 'I must tell you:' )"></p>失效 --> <!-- v-text里用過(guò)濾器失效，原因是在vue2.0里 管道符‘|'只能用在mousetache和v-bind中 --></div></body></html>輸出結(jié)果為：
msg is: you are minereverse msg is: Hello:enim era uoy
坑2：在vue2.0里 過(guò)濾器只能用類(lèi)似函數(shù)的寫(xiě)法reverseString( ‘I must tell you:')，括號(hào)內(nèi)是參數(shù)，不同于vue1.0的用空格后加參數(shù)的寫(xiě)法；
坑3：v-text里用過(guò)濾器失效，原因是在vue2.0里 管道符‘|'只能用在mousetache和v-bind中。
以上只是一個(gè)簡(jiǎn)單的過(guò)濾器的用法，如果涉及到復(fù)雜的數(shù)據(jù)處理的過(guò)濾器，比如實(shí)現(xiàn)vue1.0里用到過(guò)濾器套過(guò)濾器的功能，個(gè)人感覺(jué)也可以用computed來(lái)代替過(guò)濾器。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答
圖片精選
