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之empty()与remove()区别说明
Sep 10 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
js之ajax文件上传
May 13 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
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PDO::setAttribute讲解
2019/01/29 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python实现八大排序算法(2)
2017/09/14 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python随机数函数代码实例解析
2020/02/09 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python接口自动化测试的实现
2020/08/28 Python
军训自我鉴定
2013/12/14 职场文书
奥利奥广告词
2014/03/20 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
入党申请书格式
2019/06/20 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技