Vue全局过滤器日期格式化-2 vue使用过滤器完成时间转换

bigegpt 2024-11-06 16:37 6 浏览

1.定义一个日期格式化的全局过滤器

把dateStr:'2028-05-20 12:12:20'转成‘yyyy-MM-dd’格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

</head>
<body>
    <div id="app">
        <h1>{{dateStr | dateFormat}}</h1>
    </div>


    <script>
         //全局过滤器
        Vue.filter('dateFormat',function(dateStr){
            var dt = new Date(dateStr)
            var year = dt.getFullYear();
            var month = dt.getMonth()+1;
            var day = dt.getDate();
            return `${year}-${month}-${day}`
        })
        <!-- 实例化vue -->
        new Vue({
            el:'#app',
            data:{
                dateStr:'2028-05-20 12:12:20',
            },
            methods:{

            }
        })
        Vue
    </script>

</body>
</html>

2.用户自定义格式日期

自行定义日期格式，传递给过滤器，过滤器根据日期格式转换，更加灵活。如‘yyyy-MM-dd’或‘yyyy-MM-dd hh:mm:ss’格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

</head>
<body>
    <div id="app">
        <h1>{{dateStr | dateFormat('yyyy-MM-dd hh:mm:ss')}}</h1>
    </div>


    <script>
        ////全局过滤器。自行定义日期格式，传递给过滤器，过滤器根据日期格式转换，更加灵活
        Vue.filter('dateFormat',function(dateStr,dateFormatStr){
            var dt = new Date(dateStr)
            var year = dt.getFullYear();
            var month = dt.getMonth()+1;
            var day = dt.getDate();
            if(dateFormatStr&&dateFormatStr.toLowerCase()==='yyyy-mm-dd'){
                return `${year}-${month}-${day}`
            }else{
                var hour = dt.getHours();
                var min = dt.getMinutes();
                var sec = dt.getSeconds();
                return `${year}-${month}-${day} ${hour}:${min}:${sec}`
            }
        })
        <!-- 实例化vue -->
        new Vue({
            el:'#app',
            data:{
                dateStr:'2028-05-20 12:12:20',
            },
            methods:{

            }
        })
        Vue
    </script>

</body>
</html>

vue日期时间选择器

上一篇：只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内
下一篇：R语言读取excel文件 r语言读取excel文件数值小数点特别多

Vue全局过滤器日期格式化-2 vue使用过滤器完成时间转换

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程