過濾器是個(gè)啥疲酌？
使用vue的時(shí)候败徊，綁定數(shù)據(jù)時(shí)超級(jí)方便的竞阐，只需要 {{message}}這樣既可容诬，但是有時(shí)候我們也有些特殊的需求谊囚，比如
<div id='app'>
<div v-for="number in numbers">{{number}}</div>
</div>
var vm=new Vue({
el:"#app",
data:{
msgs:[],
numbers:[1,2,3,4,5,6,7,8,9,10,11,12,13]
}
});
顯示出來沒毛病哈扳躬，不過產(chǎn)品汪不答應(yīng)啊私爷，說你能不能再小于10的數(shù)字前邊加上個(gè)0宠纯？面對(duì)他這么正（wu）當(dāng)（li）的要求鸠澈，我只能說 好Ｖ妗！
自己遍歷款侵？好麻煩Ｄ┘觥！新锈！有沒有其他辦法甲脏？ vue提供了過濾器這個(gè)東西來幫助我們實(shí)現(xiàn)這種需求。
過濾器是一個(gè)通過輸入數(shù)據(jù)妹笆，能夠及時(shí)對(duì)數(shù)據(jù)進(jìn)行處理并返回一個(gè)數(shù)據(jù)結(jié)果的簡(jiǎn)單函數(shù)块请。
定義過濾器
//全局過濾器
Vue.filter('toDou',function(value){
if (!value) return '';
return value<10? '0'+value:value;
});
Vue的filter方法接收兩個(gè)參數(shù)：第一個(gè)是過濾器名字，第二個(gè)是數(shù)據(jù)的處理函數(shù)拳缠，數(shù)據(jù)的處理函數(shù)第一個(gè)參數(shù)是我們要處理的數(shù)據(jù)
使用過濾器【把要處理是數(shù)據(jù)用 | （管道符）隔開】vue會(huì)直接把 number 放入toDou過濾器的第一個(gè)參數(shù)位
<div id='app'>
<div v-for="number in numbers">{{number | toDou}}</div>
</div>
過濾器傳參數(shù)
有時(shí)候墩新，我們可能不是僅僅是需要對(duì)文字處理這么簡(jiǎn)單，比如說我們想寫一個(gè) （打折）discount的過濾器窟坐，如果我們?nèi)珗?chǎng)打8折海渊，這么寫就行了
Vue.filter('discount',function(value){
if (!value) return '';
return value*80/100;
});
但是需求遠(yuǎn)不止這些，產(chǎn)品汪說哲鸳，全場(chǎng)有的東西打6折臣疑，有的打5折，有的...
那么徙菠，我們可以把打的折扣數(shù)作為一個(gè)參數(shù)傳遞給過濾器讯沈，例如這樣
<div id='app'>
<div v-for="number in numbers">{{number | discount(50)}}</div>
</div>
//注意！Ｐ霰肌Ｈ焙荨！Ｆ继＜非选！１尽Ｍ苑！Ｆ汀Ｇ粝巍！５裱亍Ａ肥！Ｉ舐帧７拾ァ！疾渣！
//過濾器含參數(shù)傳遞時(shí)篡诽，第一個(gè)參數(shù)會(huì)放入數(shù)據(jù)處理函數(shù)的第二個(gè)參數(shù)為，如果有其他參數(shù)依次類推
上面打 5 折
Vue.filter('discount',function(value,discount){
if (!value) return ''
return value*discount/100;
});
vue1.0版本內(nèi)置了capitalize榴捡、uppercase杈女、currency、debounce吊圾、json等幾種過濾器达椰，不過到2.0這些過濾器都被刪除了。我們來自定義一個(gè)白
//字符串轉(zhuǎn)換為小寫
Vue.filter('lowercase',function(val){
return val.toLowerCase();
})
//英文單詞首字母大寫
Vue.filter('capitalize',function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
有人會(huì)問项乒，如果我一個(gè)數(shù)據(jù)同時(shí)需要用兩個(gè)過濾器可以嗎啰劲？
<header>
大寫轉(zhuǎn)小寫 然后首字母大寫 {{'LOWERCASE' | lowercase | capitalize }}
</header>
另外一種自定義過濾器的方法（局部過濾器）
我們也可以在我們Vue實(shí)例里構(gòu)造我們的過濾器，這樣構(gòu)造的好處是檀何，不會(huì)影響到其他不需要用到這個(gè)過濾器的Vue實(shí)例蝇裤。
var vm=new Vue({
el:"#app",
data:{
msgs:[],
numbers:[1,2,3,4,5,6,7,8,9,10,11,12,13]
},
filters:{
capitalize:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
定義在全局就能在所有的實(shí)例中調(diào)用過濾器，如果定義在了實(shí)例里就在實(shí)例里調(diào)用過濾器频鉴。
