Vue中 使用 moment.js 计算时间差值

简介: Vue中 使用 moment.js 计算时间差值

传送门:

Vue中 使用 moment.js 获取相关时间

Vue中 使用 moment.js 进行日期时间格式化

安装插件:moment.js

npm install moment

format就是格式化函数,参数’YYYY-MM-DD HH:mm:ss’定义了返回日期的格式。

详情请看下图:

2020062310470442.png

1. 计算两个日期差

var moment = require('moment');
let diffTime = moment('2020-04-02').diff(moment('2019-04-02'));
console.log(diffTime); // 31622400000 单位是毫秒

2. 时间差格式化

var moment = require('moment');
let starttime = '2018-12-14 18:00';
let endtime = '2018-12-15 10:22';
var totalMinute = moment(endtime).diff(starttime) / (1000 * 60),
  hours = Math.floor(totalMinute / 60),
  minute = totalMinute % 60,
  result = '';
if(hours > 0){
  result = result + hours + '小时';
}
if(minute > 0){
  result = result + minute + '分钟';
}
console.log(result); // 16小时22分钟

3. 两个日期比较

// 是否之前
moment('2018-10-20').isBefore('2018-12-31', 'year'); // false
moment('2018-10-20').isBefore('2019-01-01', 'year'); // true
moment('2018-10-20').isBefore('2019-01-01'); // true
// 是否之后
moment('2010-10-20').isAfter('2010-01-01', 'year'); // false
moment('2010-10-20').isAfter('2009-12-31', 'year'); // true
// 是否相同
moment('2010-10-20').isSame('2009-12-31', 'year');  // false
moment('2010-10-20').isSame('2010-01-01', 'year');  // true
moment('2018-01-01').isSame('2018-01-01');  // true
// 是否是闰年
moment([2000]).isLeapYear() // true
moment([2001]).isLeapYear() // false

参考文章(侵删)


相关文章
|
1月前
|
JavaScript 前端开发
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
92 3
|
1月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
42 4
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
37 0
|
3月前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
2月前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
66 1
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
30 1
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
203 0