一、過(guò)濾器介紹:
1缚甩、在Vue中會(huì)通過(guò)過(guò)濾器（Filters）來(lái)渲染數(shù)據(jù)，使視圖可讀性更加優(yōu)雅冈钦。
2宾袜、Vue中的過(guò)濾器不能替代Vue中的methods、computed或者watch绅络，但有時(shí)候功能卻是可以達(dá)到相同的效果
3、過(guò)濾器不改變真正的data衷恭，而只是改變渲染的結(jié)果灭袁，并返回過(guò)濾后的版本
4窗看、過(guò)濾器可以保持API響應(yīng)的干凈茸歧，并在前端處理數(shù)據(jù)的格式。
5显沈、可以有效地封裝成可重用代碼塊背后的所有邏輯软瞎。
6、在Vue 2.0中已經(jīng)沒(méi)有內(nèi)置的過(guò)濾器了拉讯，我們可以自定義過(guò)濾器涤浇。
二、過(guò)濾器分類：
全局過(guò)濾器：
Vue.filter(“過(guò)濾器名稱”,callback)
局部過(guò)濾器：
filters:{"過(guò)濾器名稱":callback}
三盖彭、過(guò)濾器的使用場(chǎng)景：
過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (表達(dá)式用法從 2.1.0+ 開(kāi)始支持)片挂。
<1>基礎(chǔ)語(yǔ)法：
將過(guò)濾器添加在 JavaScript 表達(dá)式的尾部件余，由“管道”符號(hào)指示：
<template>
<div class='container'>
<h2>{{time | format}}</h2>
<p :class="code | colorformat">狀態(tài)<p>
</div>
</template>
<script>
export default {
data() {
return {
time: 1534502396,
code: 1
};
},
filters: {
format(val) {
let date = new Date(val * 1000);
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
m = m >= 10 ? m : "0" + m;
d = d >= 10 ? d : "0" + d;
return y + "-" + m + "-" + d;
},
colorformat(val){
let cls = '';
val == 1 ? cls = 'red' : cls='green';
return cls;
}
};
<2>多個(gè)過(guò)濾器串聯(lián)
多個(gè)過(guò)濾器串聯(lián)時(shí)岳颇，會(huì)將前一個(gè)過(guò)濾器的結(jié)果作為參數(shù)傳給下一個(gè)過(guò)濾器。
<template>
<h2>{{num | resolveA | resolveB}}</h2>
</template>
<script>
export default {
data() {
return {
num: 50
};
},
filters: {
resolveA(val) {
if (val < 30) {
return 0.4 * val + 50;
} else {
return (1.25 * val + 0.4 * 30) / 3;
}
},
resolveB(val){
return val.toFixed(2);
}
}
};
</script>
<3>雙向過(guò)濾器
目前我們使用過(guò)濾器都是在把來(lái)自模型的值顯示在視圖之前轉(zhuǎn)換它玩讳。不過(guò)也可以定義一個(gè)過(guò)濾器误窖，在把來(lái)自視圖（<input> 元素）的值寫(xiě)回模型之前轉(zhuǎn)化它：
Vue.filter('currency', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return '$'+val.toFixed(2)
},
// view -> model
// 在寫(xiě)回?cái)?shù)據(jù)之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
如果感覺(jué)有幫助，可以關(guān)注和點(diǎn)贊！Ｓ驯恰胸梆！
