在学习 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
...
}
}
