过滤器的说明》

对时间戳进行格式化
1.准备工作
1.引入第三方库
2.进入Bootcdn官网链接地址
3.搜索dayjs,并下载相关js文件
在这里插入图片描述
4.将下载的js文件放在要创建的项目下
5.创建项目时，最先引入dayjs文件
6.若使用中有疑问，访问dayjs的说明文档地址

2.普通函数对时间戳进行格式化

 <div id="app">
        <p>更改前:{{first}}</p>
        <p>更改后:{{last}}</p>
        <button @click="transform()">转换后</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                first:Date.now(),
                last:''
            },
            methods:{
                transform(){
                    this.last=dayjs().format('YYYY-MM-DD HH:mm:ss')
                }
            }

        }) 
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果图
在这里插入图片描述

3.使用filter对时间戳进行格式化
关键语句：dayjs(时间戳).format('YYYY-MM-DD')

<div id="app">
        <p>转换前：{{first}}</p>
        <p>转换后：{{first | timeFormat}}</p>
        <!-- 格式  {{时间戳 | 格式转换函数}} -->
        
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                first:Date.now(),
            },
            filters:{
                timeFormat(val){
                    //这个val的值是由first传入
                    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
                }
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果图
在这里插入图片描述
3.1当转换函数有参数时

<div id="app">
        <p>转换前：{{first}}</p>
        <p>转换后：{{first | timeFormat('YYYY-MM-DD') }}</p>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                first:Date.now(),
            },
            filters:{
                timeFormat(val,arr){
               	 		//val指的是first时间戳
               		    //arr指的是'YYYY-MM-DD'
                   return dayjs(val).format(arr) 
                }
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图
在这里插入图片描述

3.2多个转换函数对时间戳的格式化

<body>
    <div id="app">
        <p>转换前：{{first}}</p>
        <p>转换后：{{first | timeFormat('YYYY-MM-DD') | myslice}}</p>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                first:Date.now(),

            },
            filters:{
                timeFormat(val,arr){
                    return dayjs(val).format(arr)
                },
                myslice(val){
                   return val.slice(0,4)
                   //slice(start,end) 从start开始不包含end
                }
            }
        })
    </script>
    
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.2.1配置全局过滤器
核心代码： Vue.filter('myslice',function(val){ return val.slice(0,4) })

<body>
    <div id="app">
        <p>转换前：{{first}}</p>
        <p>转换后：{{first | timeFormat('YYYY-MM-DD') | myslice}}</p>
    </div>

    <script>

        Vue.filter('myslice',function(val){
            return val.slice(0,4)
        })
        //配置全局过滤器

        const vm = new Vue({
            el:'#app',
            data:{
                first:Date.now(),

            },
            filters:{
                timeFormat(val,arr){
                    return dayjs(val).format(arr)
                },
                // myslice(val){
                //    return val.slice(0,4)
                //    //slice(start,end) 从start开始不包含end
                // }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

总结
定义：对要显示的数据进行特定格式化后再显示
语法：
1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
2.使用过滤器：{{ 时间戳 | 过滤器名}}或v-band:属性=“时间戳 | 过滤器名”
备注：
1.过滤器也可以接收额外参数，多个过滤器可以串联
2.并没有改变原有的数据，是产生新的对应数据

相关阅读:
java基础之重载与重写
 ERP系统如何改善企业的业务？
【clickhouse专栏】clickhouse性能为何如此卓越
 基于若依ruoyi-nbcio支持flowable流程角色，同时修改流转用户为username，流程启动做大调整（二）
C语言之条件语句强化练习题
 如何实现全链路日志？
伤停等待（wound-wait）在分布式事务中
 Docker安装Nginx（配置SSL证书）
数据结构——时间复杂度
 【问题记录】pandas:OverflowError: Python int too large to convert to C long
原文地址：https://blog.csdn.net/zimingyo/article/details/126842216