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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python实现超市商品销售管理系统
2019/10/25 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
上课迟到检讨书100字
2014/01/11 职场文书
年会主持词结束语
2014/03/27 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2014财务年终工作总结
2014/12/08 职场文书
党员自我评价范文2015
2015/03/03 职场文书
CSS基础详解
2021/10/16 HTML / CSS