Vue日期处理

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>通过过滤器实现数据格式化</title>
    <script>
        // 过滤器一定要在Vue实例初始化之前注册成功否则映射不到
        Vue.filter('date_format', function(input, pattern = ''){
            let datetime = new Date(input);
            // 获取年月日
            let year = datetime.getFullYear();
            let month = (datetime.getMonth() + 1).toString().padStart(2, '0');
            let day = datetime.getDate().toString().padStart(2, '0');
            // 获取时分秒
            let hh = datetime.getHours().toString().padStart(2, '0');
            let mm = datetime.getMinutes().toString().padStart(2, '0');
            let ss = datetime.getSeconds().toString().padStart(2, '0');
            // 如果传递进来的字符串类型，转为小写之后，等于yyyy-mm-dd,就返回年-月-日
            // 否则返回 年-月-日 时:分:秒
            if(pattern.toLowerCase() === 'yyyy-mm-dd'){
                return `${year}-${month}-${day}`;
            }else{
                // ES6语法
                return  `${year}-${month}-${day} ${hh}:${mm}:${ss}`
            }
        })
        /*
        *
        *
        * */
    </script>
   <style>
   </style>
</head>
<body>

    <div id="app">
        <!--
        2021-12-11 19:33:27
        2021-12-11
        -->
        <h2>{{message|date_format('yyyy-mm-dd HH:mm:ss')}}</h2>
        <h2>{{message|date_format('yyyy-mm-dd')}}</h2>
    </div>
    <script>
        let v = new Vue({
            el: "#app",
            data: {
                message: new Date()
            },
            // 注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
            filters: {
                dateFormatPrivate: function(input, pattern = ''){ // 私有局部过滤器，只对当前VM对象所控制的View区域有效

                }
            }
        })
    </script>
</body>

<!--
    插值表达式中会有一种需求进行数据的二次格式化，Vue过滤器使用管道符实现数据格式化
       {{data|filter1|filter2}}
-->
posted @ 2021-12-11 19:35 Felix_Openmind 阅读(475) 评论(0) 收藏举报
刷新页面返回顶部
Felix_Openmind

https://github.com/serendipitywzz

Vue日期处理
