总结：
过滤器： 定义：对要显示的数据进行特定格式化后显示（适用于一些简单逻辑处理） 语法： 1.注册过滤器（全局）Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{xxx |过滤器名}} 或 v-bind:属性 ="xxx | 过滤器名" 备注： 1.过滤器也可以接收额外的参数、多个过滤器也可以串联 2.并没有改变原本的数据，是产生新的对应的数据 1.计算属性实现2.methods实现
3.过滤器实现
4.过滤器实现（传参）
注册过滤器（全局）Vue.filter(name,callback) 或 new Vue{filters:{}}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>过滤器</title>
8 <script type="text/javascript" src="../js/vue.js"></script>
9 <script type="text/javascript" src="../js/dayjs.min.js"></script>
10 </head>
11 <body>
12 <!-- 准备好一个容器 -->
13 <div id="root">
14 <h2>显示格式化后的时间</h2>
15 <!-- 计算属性实现 -->
16 <h3>现在是：{{fmtTime}}</h3>
17 <!-- methods实现 -->
18 <h3>现在是：{{getfmtTime()}}</h3>
19 <!-- 过滤器实现 -->
20 <h3>现在是：{{time | timeFormater}}</h3>
21 <!-- 过滤器实现(传参) -->
22 <h3>现在是：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3>
23 </div>
24 </body>
25 <script type="text/javascript">
26 Vue.config.productionTips = false //阻止vue在启动时生成生产提示\
27 //全局过滤器
28 Vue.filter('mySlice',function(value){
29 return value.slice(0,4)
30 })
31 new Vue({
32 el:'#root',
33 data:{
34 time:1635836031864 //时间戳
35 },
36 computed:{
37 fmtTime(){
38 return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss')
39 }
40 },
41 methods: {
42 getfmtTime(){
43 return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss')
44 }
45 },
46 //局部过滤器
47 //region
48 // filters:{
49 // timeFormater(value){
50 // return dayjs(value).format('YYYY年-MM月-DD日 HH:mm:ss')
51 // }
52 // },
53 //endregion
54 filters:{
55 timeFormater(value,str='YYYY年-MM月-DD日 HH:mm:ss'){
56 return dayjs(value).format(str)
57 },
58 // mySlice(value){
59 // return value.slice(0,4)
60 // }
61 }
62 })
63
64 </script>
65 </html>