Vue: 过滤器

在学习 Vue 的过程中，总是会忘了有过滤器这回事，因为一般获取了数据后就直接用函数去处理数据了，所以今天就来补一下过滤器的知识。其实在数据上添加过滤器会使得我们代码更新优美。

用法

只要使用管道符号就可以了。这里和命令行里的“管道”或者后端说的“中间件”的道理是一样的，一个输入一个输出。

<span>{{ 数据 | 过滤器}}</span>

自定义过滤器

Vue 允许你自定义自己的过滤器，下面用时间过滤器作为例子，假如现在有一个 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}`
    }
}

过滤器的参数

第一个参数是原始数据，第二个参数对应传入的第一个参数，然后以此类推。

<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
        ...
    }
}