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 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php 随机生成10位字符代码
2009/03/26 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
js的三种继承方式详解
2017/01/21 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Django admin组件的使用
2020/10/24 Python
思想品德自我鉴定
2013/10/12 职场文书
后勤人员岗位职责
2013/12/17 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
基层党建工作简报
2015/07/21 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
七年级作文之环保作文
2019/10/17 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python