版权声明：欢迎转载，转载请注明出处哦！ https://blog.csdn.net/qq_41647999/article/details/85038862
目录直通车
我还是先解释，后面贴出实例代码，便于大家学习。
filter是Vue的一个函数，使用之前需要先定义。
定义过滤器
//filterName是自己给过滤器命的名
Vue.filter('filterName', function (value) {
// 返回处理后的值
})使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>在做项目的过程中，处理格式化日期的filter比较多。这里给大家推荐一个开源项目，这个项目专门用于格式化日期的，目前star已经达到了39.5k。下面和大家分享一下如何使用http://momentjs.cn。
引入cdn
所以先打开bootcdn.cn找到moment.js
直接翻到最后，引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>怎么使用？
打开momentjs.cn看官方文档！建议避免去看别人的博客，容易被误导！
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>{{time}}</p>
<p>最完整的: {{time | dateString}}</p>
<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
// 定义过滤器
Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
return moment(value).format(format);
})
new Vue({
el: '#test',
data: {
time: new Date()
},
mounted () {
setInterval(() => {
this.time = new Date()
}, 1000)
}
})
</script>
</body>
</html>