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

说明

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

console.log(new Date());

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

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

过滤器

在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 过滤器日期格式化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 过滤器vue.filters的使用方法实现

    过滤器vue.filters的使用方法实现

    写项目的时候,有一些方法我们是需要全局使用的,比如数字的四色五入保留小数点啊.一些工具方法.字符的格式化啊等等.这些很多页面需要用的.使用频率极高的方法,我们一般会将其封装为全局的方法:我以前是这样做的,有这么几种方式: 1.挂载到vue.prototype 在main.js入口文件中挂载到vue.prototype,如我们封装一个获取时间戳的函数. Vue.prototype.now = Date.now || function () { return new Date().getTime()

  • vue通过过滤器实现数据格式化

    一.本节说明 在使用插值表达式的时候,我们通常会有一种需求,就是将数据进行二次的格式化.VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入. 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要学习到的v-bind指令中也可以使用过滤器.用法是一致的,到时候我们再看一看. 二. 怎么做 全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据.对

  • vue指令v-html使用过滤器filters功能实例

    问题 2.0 filters only work in mustache tags and v-bind. Vue2.0 不再支持在 v-html 中使用过滤器,比如在 1.0 中是这样使用的: {{{ option.title | highlight }}} 然而,现在不能使用了,Vue2.0 的过滤器现在只能应用在 {{ }} 和 v-bind 中. 然而,嫌麻烦,还想使用怎么办? 解决方法 使用全局方法 使用 computed 属性 使用 $options.filters 使用全局方法 p

  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    前言 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求.然后就对vue中的filter一些用法结合源码好好的梳理了下.下边我们以一个日期格式化展开讨论. 1. 定义一个日期格式化函数 都9012了,我们就采用 ES Module的写法,在vue初始化的项目src的文件中新建一个filters文件夹,并在其中添加DateFmt.js文件,代码如下 export functio

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

    说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Date()); 我们获取的是一个标准时间,控制台的输出如下所示. 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化. 过滤器 在vue中,我们可以使用过滤器来进行时间格式化.它的写法如下: // Vue.filter(过滤器

  • vue echarts实现航班选座案例分析

    vue echarts实现航班选座案例分析

    目录 背景 实现思路 代码分析 获取svg 注册自定义地图 geo组件的配置 举一反三 三 效果图 注意点 背景 最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位.于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码.首先让我们来看下示例的效果图. 实现思路 代码是使用echarts来实现的,主要用到的是svg和自定义地图的相关知识.示例的完整代码 在做选座的功能,我们使用d

  • Vue 动态设置路由参数的案例分析

    在vue中 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例: <template> <div> <button @click="goht">后退<button> <br/> <button @click="goqj">前进<button>

  • vue父子模板传值问题解决方法案例分析

    vue父子模板传值问题解决方法案例分析

    本文实例讲述了vue父子模板传值问题解决方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <one></o

  • Vue中金额、日期格式化插件@formatjs/intl的使用及说明

    目录 Vue金额.日期格式化插件@formatjs/intl使用 Intl.NumberFormat用于数字计算 数字分组 位数控制 长度表示 字节单位表示 复合单位表示 百分比表示 货币表示 质量表示 温度表示 容积表示 角度表示 大数字表示 总结 Vue金额.日期格式化插件@formatjs/intl使用 vue项目中我们可以使用第三方比较牛的日期.金额数字格式化的插件:@formatjs/intl 这个插件的官方地址是: https://formatjs.io/docs/intl/ 更方便

  • JS库中的Particles.js在vue上的运用案例分析

    JS库中的Particles.js在vue上的运用案例分析

    知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架的,两个凑在一起学了. 讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目 酷酷的登录页 嘻嘻~ 安装particles.js npm install --save particles.js 配置particles.js 1.data 这个data是用于控制粒子在页面中所呈现的状态. { "particles": { "number": {

  • 使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析

    安装环境 安装node.js并配置环境变量 安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack,cnpm install webpack -g 安装脚手架npm install vue-cli -g 创建项目 在硬盘上找一个文件夹放工程用的,在终端中进入该目录,cd目录路径 根据模板创建项目,vue init webpack-simple 工程名字<工程名字不能用中文>,vue init

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • vue.js中导出Excel表格的案例分析

    有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader 2.导入两个JS 下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 ** import Blob from '

随机推荐