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 阅读(453) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Vue日期处理

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	<!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}}
	-->