什么是过滤器？
过滤一遍原始值，来组成想要的值渲染到模板上
过滤器语法：
<div>{{ 变量 | 过滤器名字 }}</div>
Vue.filter('过滤器名字',function(变量传参){
// 处理代码
return 返回值;
})
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 过滤器处理日期数据 -->
<div>{{ date | filter-date }}</div>
</div>
</body>
<script>
Vue.filter('filter-date', function(val) {
// 处理日期数据
let year = val.getFullYear();
let month = val.getMonth() + 1;
let day = val.getDate();
let hour = val.getHours();
let minute = val.getMinutes();
let second = val.getSeconds();
return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`
})
new Vue({
el: '#app',
data: {
// 定义日期数据
date: ''
},
created() {
// 初始化日期对象
this.date = new Date();
},
})
</script>
</html>