vue过滤器实现日期格式化的案例分析


Posted in Javascript onJuly 02, 2020

说明

今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。
大家都知道,我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。

console.log(new Date());

我们获取的是一个标准时间,控制台的输出如下所示。

vue过滤器实现日期格式化的案例分析

在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化

过滤器

在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下:

// Vue.filter(过滤器名称,处理函数)

使用的方式

{{ 过滤器数据| 过滤器名称 }}

具体代码

代码如下:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<p>今天的日期是:{{timer|timerFilter('-')}}</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			Vue.filter("timerFilter", function (time, type) {
				const month =
					time.getMonth() + 1 > 10
						? time.getMonth() + 1
						: "0" + (time.getMonth() + 1);
				const day =
					time.getDate() > 10 ? time.getDate() : "0" + time.getDate();
				return time.getFullYear() + type + month + type + day;
			});
      
			new Vue({
				el: "#app",
				data: {
					timer: new Date(),
				},
			});
		</script>
	</body>
</html>

代码的运行结果如下所示:

vue过滤器实现日期格式化的案例分析

到此这篇关于vue过滤器实现日期格式化的案例分析的文章就介绍到这了,更多相关vue 过滤器日期格式化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
详解React 元素渲染
Jul 07 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 #Javascript
node运行js获得输出的三种方式示例详解
Jul 02 #Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 #Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 #Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 #Javascript
JS字符串和数组如何实现相互转化
Jul 02 #Javascript
Vue父子之间值传递的实例教程
Jul 02 #Javascript
You might like
cmd下运行php脚本
2008/11/25 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php动态绑定变量的用法
2015/06/16 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
小程序自定义日历效果
2018/12/29 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python读写二进制文件的方法
2015/05/09 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python之随机数函数的实现示例
2020/12/30 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
北京大学自荐信范文
2014/01/28 职场文书
安全责任书范本
2014/04/15 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
网络编辑求职信
2014/04/30 职场文书
大三学习计划书范文
2014/05/02 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书