在學(xué)習(xí) Vue 的過程中绑谣，總是會忘了有過濾器這回事，因為一般獲取了數(shù)據(jù)后就直接用函數(shù)去處理數(shù)據(jù)了，所以今天就來補一下過濾器的知識。其實在數(shù)據(jù)上添加過濾器會使得我們代碼更新優(yōu)美蜡感。
用法
只要使用管道符號就可以了。這里和命令行里的“管道”或者后端說的“中間件”的道理是一樣的，一個輸入一個輸出铸敏。
<span>{{ 數(shù)據(jù) | 過濾器}}</span>
自定義過濾器
Vue 允許你自定義自己的過濾器缚忧，下面用時間過濾器作為例子，假如現(xiàn)在有一個 Date 對象杈笔，但是想用更好看的形式顯示出來闪水。
data() {
return {
date: new Date()
}
}
HTML 綁定 date。
<div id="root">
{{date | formatDate}}
</div>
自定義過濾器可以提供里面的信息蒙具，然后拼湊出好看的形式球榆。
filters: {
formatDate(value, arg1, arg2) {
let date = new Date(value)
let year = date.getFullYear()
let month = plusDate(date.getMonth() + 1)
let day = plusDate(date.getDate())
let hour = plusDate(date.getHours())
let minute = plusDate(date.getMinutes())
let second = plusDate(date.getSeconds())
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
}
過濾器的參數(shù)
第一個參數(shù)是原始數(shù)據(jù)，第二個參數(shù)對應(yīng)傳入的第一個參數(shù)禁筏，然后以此類推持钉。
<div id="root">
{{date | formatDate(66, 99)}}
</div>
JS
filters: {
formatDate(value, arg1, arg2) {
console.log(value) // date
console.log(arg1) // 66
console.log(arg2) // 99
...
}
}
