假設(shè)場景：將長度單位厘米轉(zhuǎn)化為米率寡。
若傳來的數(shù)據(jù)如圖所示职烧，要將其中的數(shù)字轉(zhuǎn)化為米捧挺。那在沒有過濾器的情況下虑绵，需要我們循環(huán) lengthArr 數(shù)組，將原數(shù)據(jù)轉(zhuǎn)化為具體需要的數(shù)據(jù)闽烙。而 Vue 提供了過濾器翅睛，可以讓這問題得以更好的解決。
過濾器（filter）的作用
- 在不改變 data 的情況下黑竞，只改變渲染的結(jié)果捕发，得到渲染后的結(jié)果。
- 在處理前端數(shù)據(jù)格式時很魂，保持響應(yīng)的干凈扎酷。
使用方式
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
自定義過濾器
定義過濾器有兩種方式。第一種是全局過濾器遏匆，它可以直接在vue對象上使用filter方法注冊過濾器法挨，這種全局注冊的過濾器在任何一個組件內(nèi)都可以使用。第二種則是組件內(nèi)部的過濾器幅聘，注冊組件內(nèi)部過濾器則只能在當(dāng)前組件內(nèi)使用凡纳。當(dāng)全局過濾器和局部過濾器重名時，會采用局部過濾器帝蒿。
全局定義
html部分
{{ message | capitalize }} // capitalize 為過濾器的名字
js部分
Vue.filter('capitalize'荐糜，function(data){
....
})
1、在 Vue.filter('capitalize'葛超，function(data){}) 中狞尔，第一個參數(shù)是過濾器的名字，第二個參數(shù)是過濾器的功能函數(shù)巩掺。
2偏序、在功能函數(shù) function(data){} 中，參數(shù)可以有多個胖替，第一個參數(shù)是傳入的要過濾數(shù)據(jù)研儒，即原數(shù)據(jù)豫缨。第二個參數(shù)開始就是html調(diào)用過濾器的時候傳入的參數(shù)。
局部定義
html部分
{{ message | capitalize }} // capitalize 為過濾器的名字
js部分
filters:{
capitalize：function (data){
...
}
}
例子：
html代碼
<div class="demo">
<p v-for="item in lengthArr">{{item.millimeter}}mm ==> {{item.millimeter | meterChange}}</p>
</div>
js代碼
Vue.filter('meterChange', function(val, unite) {
val = val/1000 || 0;
if(val) {
unite = 'm';
return val + unite
}
return
});
new Vue({
el: ".demo",
data: {
lengthArr: [
{millimeter: 10000},
{millimeter: 1000},
{millimeter: 100},
],
}
})
效果：
