在學(xué)習(xí) Vue 的過程中，總是會(huì)忘了有過濾器這回事，因?yàn)橐话惬@取了數(shù)據(jù)后就直接用函數(shù)去處理數(shù)據(jù)了，所以今天就來補(bǔ)一下過濾器的知識。其實(shí)在數(shù)據(jù)上添加過濾器會(huì)使得我們代碼更新優(yōu)美。

用法

只要使用管道符號就可以了。這里和命令行里的“管道”或者后端說的“中間件”的道理是一樣的，一個(gè)輸入一個(gè)輸出。

<span>{{ 數(shù)據(jù) | 過濾器}}</span>

自定義過濾器

Vue 允許你自定義自己的過濾器，下面用時(shí)間過濾器作為例子，假如現(xiàn)在有一個(gè) 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ù)

第一個(gè)參數(shù)是原始數(shù)據(jù)，第二個(gè)參數(shù)對應(yīng)傳入的第一個(gè)參數(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
        ...
    }
}