vue过滤器

1.用到的方法

Vue的filter（）方法

1.语法各式：Vue.filter('过滤器名字',处理函数 )

2.定时器

先要引入moment库来实现过滤时间

定义一个过滤器，通过在处理函数里去返回一个过滤后的时间

moment语法可查看文档

moment后面带的参数就是需要被过滤的时间，format后面带的则是过滤后的各式

这样一个过滤器就定义好了，然后在页面中渲染出来即可

过滤器的使用语法就是{{需要被过滤的数据 | 过滤器名字}}

还可以通过多传一个参数，来限制一下过滤之后的数据

只需要在定义的时候给过滤器的处理函数多传一个参数，然后在下方返回值里的各式里加上一个判断，当有传各式参数的时候，就按各式参数显示数据，没传的话就按原本设置的各式显示

同时，只需要在渲染的时候在过滤器后面加上想要指定的日期各式即可

实现效果

现在的数据在页面中是死的不会变，要想实现会动的时间，只需要再页面加载数据的时候定义一个定时器即可

这里要注意，实在vue的生命周期函数mounted（）里面定义的，设置这个定时器一秒更新一次，就可以实现页面会动的时间显示啦

代码：
<!DOCTYPE html>

<title>Title

原始版时间：<p>{{time}}

过滤之后：<p>{{time | guolvqi}}

只显示年月日：<p>{{time | guolvqi('YYYY-MM-DD')}}

只显示时分秒：<p>{{time | guolvqi('HH:mm:ss')}}

Vue.filter('过滤器名字',function (value) {

return(moment(value).format('YYYY-MM-DD HH:mm:ss'))

})

Vue.filter('guolvqi',function (value,geshi) {

return(moment(value).format(geshi ||'YYYY-MM-DD HH:mm:ss'))

})

new Vue({

el:"#app",

data:{

time:new Date(),

mounted() {

setInterval(()=>{

this.time=new Date()

},1000)

}

})

</html>