注册过滤器：
Vue.filter(name,callback) 或 new Vue({ filter:{...} })
使用过滤器：
{ {xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
一、用法
1、插值语法（局部过滤器）
使用管道符 | 进行分割，直接使用data中的数值，管道符后再接过滤器进行操作
{ {time | setTime}}：time是传入的时间参数，setTime是过滤器的名字，它会将time作为参数val传入到过滤器setTime(val)中，最后将return结果替换掉整个插值语法；
默认有一个参数：
<h3>过滤器实现：{
{time | FormatTime3}}</h3>new Vue({
el:'#root',
data:{
time:Date.now(),
temp:"12345"
},
filters:{
FormatTime3(value){
return dayjs(value).format('YYYY-MM-DD HH-mm-ss')
}
}
})也可以手动设置参数：
当调用的时候传入了参数，第一个参数value还是管道符|前面的time，第二个参数才是传入的参数'YYYY-MM-DD'；
这里给第二个参数str设置了默认参数，因为还要满足不传参的情况(按照原来的格式显示时间)
new Vue({
el:'#root',
data:{
time:Date.now(),
temp:"12345"
},
//注意：在这里定义的都是局部过滤器
filters:{
//当调用的时候传入了参数，第一个参数value还是管道符|前面的time，第二个参数才是传入的参数'YYYY-MM-DD'
//注意：这里给第二个参数str设置了默认参数，因为还要满足不传参的情况(按照原来的格式显示时间)
FormatTime3(value,str='YYYY-MM-DD HH-mm-ss'){
return dayjs(value).format(str)
}
}
})多个过滤器的串联：
如果在管道符后面还定义了另一个过滤器，那就把前面的过滤器return的结果作为后面过滤器的参数传入，最后一个过滤器的结果再替换掉整个插值语法的值；
例：{ {time | FormatTime3('YYYY-MM-DD') | MySlice}}
2、插值语法（全局过滤器）
<script>
//全局过滤器
Vue.filter('MySlice',function(value){
return value.slice(0,4);
})
new Vue({ ... })
</script>3、
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化之后的时间</h2><br>
<h3>计算属性实现：{
{formatTime}}</h3>
<h3>methods实现：{
{formatTime2()}}</h3>
<h3>过滤器实现：{
{time | FormatTime3}}</h3>
<h3>过滤器传参实现：{
{time | FormatTime3('YYYY-MM-DD')}}</h3>
<!-- 当存在多个管道符时，会层层调用，前面的作为后面的参数进行调用 -->
<h3>过滤器能够实现截取效果：{
{time | FormatTime3('YYYY-MM-DD') | MySlice}}</h3>
<!-- 过滤器不仅可以用在插值语法，还可以用在v-bind，不能用在v-model -->
<h3 :temp="temp | MySlice">尚硅谷</h3>
</div>
</body>
<script>
//全局过滤器
// Vue.filter('MySlice',function(value){
// return value.slice(0,4);
// })
new Vue({
el:'#root',
data:{
time:Date.now(),
temp:"12345"
},
computed:{
formatTime(){
return dayjs(this.time).format('YYYY-MM-DD HH-mm-ss')
}
},
methods: {
formatTime2(){
return dayjs(this.time).format('YYYY-MM-DD HH-mm-ss')
}
},
//注意：在这里定义的都是局部过滤器
filters:{
//参数value传入的值就是管道符|前面的time
// FormatTime3(value){
// return dayjs(value).format('YYYY-MM-DD HH-mm-ss')
// }
//当调用的时候传入了参数，第一个参数value还是管道符|前面的time，第二个参数才是传入的参数'YYYY-MM-DD'
//注意：这里给第二个参数str设置了默认参数，因为还要满足不传参的情况(按照原来的格式显示时间)
FormatTime3(value,str='YYYY-MM-DD HH-mm-ss'){
return dayjs(value).format(str)
},
// 参数为FormatTime3的返回值
MySlice(value){
return value.slice(0,4);
}
}
})
</script>
</html>