vue日期格式化实例

这段代码是我常用来格式化日期用的，很好用。

Date.prototype.toLocaleString = function () {   // 重写日期函数格式化日期return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()}${this.getHours() >= 10 ? this.getHours() : '0' + this.getHours()} : ${this.getMinutes()>=10?this.getMinutes():'0'+this.getMinutes()} : ${this.getSeconds() >= 10 ? this.getSeconds() : '0' + this.getSeconds()}`;};

使用办法

格式化后的日期 = new Date(这里是传入的毫秒值).toLocaleString();

Vue实例

写到这里大家一定都懂了，不懂的话，我写了一个Vue实例看看：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用Vue格式化日期---原创马优晨</title><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){var app = new Vue({el: '#app',data:{timeMes:""},created() {let self = this;self.timeMes = self.dataFormat(new Date(1522611151000))new Date(element.followTime)},methods:{dataFormat(time){return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;}}})
}</script>
<body><div id="app">作者：马优晨    时间：{{timeMes}}</div>
</body>
</html>

效果图：

如果下图的“通话时长”的这种时间：

处理函数：

    timeDeal(time) {   // time 是一个时间戳const timer = +time;const minutes = Math.floor(timer / 60);const seconds =(timer % 3600) % 60 > 9? (timer % 3600) % 60: `0${(timer % 3600) % 60}`;return `${minutes}'${seconds}''`;}

vue日期格式化实例相关推荐

react日期格式化实例
以前写过一篇关于原生JS和vue项目中日期格式化的文章,现在写一下关于react项目中日期格式化的方式. 使用react的 moment import moment from "moment ...
vue 日期格式化返回指定个数月份_vue过滤器实现日期格式化的案例分析
说明今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Da ...
vue 日期格式化返回指定个数月份_12、vue中日期格式化转换的函数
/** * format time depend on the offer timestamp or Date instance * @param {Number, Date } date 要转 ...
vue 日期格式化返回指定个数月份_python时间与日期处理一次看个够（time、datetime、calendar）...
前言 python中常常会遇见时间.日期相关的处理,python标准库其实就提供了非常强大的处理能力,它们是time.datetime.calendar标准库,下面是它们常见的一些用法,一起来看看吧! ...
vue 日期格式化-将时间2020-11-10T12:01:50.942转换成2020-11-10 12:01
返回数据: 页面效果: 代码如下: dateFormat ('Tue Mar 06 2012 00:00:00 GMT+0800', 'yyyy-MM-dd');//示例 function dateF ...
在vue、html中手动写日期格式化转换为“yyyy-MM-dd hh:mm:ss”
做前端页面的时候,貌似日期格式化是没有预置的,需要自己写(当然大部分都是直接C+V了),但是觉得那些方法不容易看懂,而且对于小白来说,用起来也不是那么地方便,于是自己写了一个简单的日期格式化函数. 在 ...
vue过滤器实现日期格式化
说明今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Da ...
什么是千年虫?计算机如何开始处理日期?都有哪些时间日期格式化?
目录 "千年虫"漏洞(Year 2000 Problem,简称"Y2K") 计算机是怎么开始处理日期的么? 举例1:时间格式化举例( 过滤器) 举例2:时间格式 ...
MySQL的datetime日期格式化，和Oracle的datetime日期格式化
MySQL中,可以通过以下三个函数,分别获得当前系统年月日时分秒.当前系统年月日.当前系统时分秒 : SELECT NOW(); -- 获取当前年月日时分秒:显示结果:2016-01-14 13:03 ...

vue日期格式化实例

Vue实例

效果图：

vue日期格式化实例相关推荐

最新文章

热门文章