一、介绍

moment.js是一款现在对时间处理的强大的函数。

Moment被设计用于在浏览器和Node.js中工作。

目前ci系统使用的浏览器有:IE8、IE9在Windows 7上、Chrome在Windows XP上、Safari 10.8在Mac上、Firefox在Linux上。

所有代码都可以在这两种环境中工作。所有单元测试都在这两个环境中运行。

二、安装

npm install moment

三、引入方式

//require 方式
var moment=require('moment');
//import 方式
import moment from '
moment'; 四、使用 以当前时间2018-12-13 16:35:23 星期四 作为参考例子

1.取当天时间,以YYYY年MM月DD日形式显示
  let now = moment().format('YYYY年MM月DD日') // 2018年12月13日

2.任意时间戳格式化,以YYYY-MM-DD HH:mm:ss形式显示

  let nowStamp = 1544690123000

  let nowTime = moment(nowStamp).format('YYYY-MM-DD HH:mm:ss') // 2018-12-13 16:35:23
3.获取当前年份、月份、日期

  let y = moment().year() // 年 2018
  let m = moment().month() + 1 // 月份 从0开始,当前月要+1    12
  let d = moment().date() // 日   13
  let w = moment().week() // 今年第xx个周   50
4.星期几的日期
  let weekDay = moment().weekday(2).format('YYYY-MM-DD') // 2018-12-11   星期二的日期
  let weekDay = moment().weekday(5).format('YYYY-MM-DD') // 2018-12-14   星期五的日期
5.时间加减法
  减法:
  //获取上个月今天的日期,格式以YYYY-MM-DD显示
  let preMonth = moment().subtract(1, 'months').format('YYYY-MM-DD') // 2018-11-13 上个月今天
  // 获取前一天的日期,格式以YYYY-MM-DD显示

  let preDay = moment().subtract(1, 'days').format('YYYY-MM-DD') // 2018-12-12 昨天
  // 获取前一年的日期,格式以YYYY-MM-DD显示
  let preYear = moment().subtract(1, 'years').format('YYYY-MM-DD') // 2017-12-13 去年今天
 加法:
  // 获取下一年的日期,格式以YYYY-MM-DD显示
  let nextYear = moment().add(1, 'years').format('YYYY-MM-DD HH:mm:ss') // 2019-12-13 17:23:57 明年今天
  hours,days,months就不一一赘述了
6.判断
 console.log(moment([2000]).isLeapYear(), '判断2000是否是闰年') // true
 console.log(moment([2018]).isLeapYear(), '判断2018是否是闰年') // false
 
五、使用感想
  之前用原生的js方法写日期格式 ,代码量有点多,用过moment.js之后就发现要简单许多,适合于大多数情况,因为format()方法里可以随意设置格式。
  
 


vue中moment.js的使用的更多相关文章

  1. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  2. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  3. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  4. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  5. vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

  6. 关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  7. vue中引入js,然后new js里的方法

    阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...

  8. vue中的js动画与Velocity.js结合

    vue里面除了用css写动画,还可以用js写动画,vue的transition中,定义了几个动画钩子 第一个动画钩子:@before-enter <div id='app'> <tr ...

  9. 050——VUE中使用js库控制vue过渡动作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. vue中通过js控制页面样式方法

    在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

随机推荐

  1. spring事务管理(xml配置)与spring自带连接数据库JdbcTemplate

    什么是事务,很通俗的话来说就是,我们日常生活中总会出现在银行转账的业务,加入A向B转账100元,此时A的账户中应该减少100元,B的账户中增加100元,但是如果在A转完账B还没有接受的时候,服务器出现 ...

  2. [LC] 359. Logger Rate Limiter

    Design a logger system that receive stream of messages along with its timestamps, each message shoul ...

  3. tomcat一闪而过

    JAVA_HOME should point to a JDK not a JRE |vista tomcat 有的朋友在启动Tomcat的时候会出现问题. 1例如: 手动点击startup.bat ...

  4. html中的select下拉框

    <select name="effective"> <option value="">请选择</option> <op ...

  5. 简单了解char和varchar的区别

    一.CHAR和 VARCHAR的区别? 1.CHAR有固定的长度,VARCHAR属于可变长度的字符类型. 2.比如,写入内容到CHAR(10)里,如果内容占用的空间不够10,则会用空格字符补足. 二. ...

  6. Uber自动驾驶卡车正式运营,是否会给卡车司机彻底“宣判死刑”?

    随着科技的快速迭进和嬗变,大众的生活也在被全面革新和改变.不过有些改变是显性的,比如PC和智能手机的出现.有些改变却是隐性的,比如太空科技.云计算等.而在当下,又一个看似与大众生活紧密相关,但一般人却 ...

  7. 如何卸载烦人的2007组件,windows提供的解决方案

    如何卸载烦人的2007组件:很恶心人各种软件已经手动删除卸载都无法用,不是cd/dvd找不到就是什么msi文件找不到:对于这种恶心的问题,windows提供了如下解决方案:我使用fixit轻松卸载,很 ...

  8. react 踩坑记

    yarn  node-sass 安装失败 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass yarn i ...

  9. nginx在反向代理侧实现ssl

    被代理的webserver为lnmp项目,现在需要在反向代理侧使用nginx实现ssl的反向代理(域名解析在反代的ip上),配置如下: upstream XXX { server 192.168.0. ...

  10. 这些科学家用DNA做的鲜为人知事,你估计都没见过!

    DNA世界的每一步都给人类带来奇妙甚至吃惊的发现.研究人员越来越多地探索和掌握了生命中的分子.生物与技术之间的界限以前所未有的方式模糊,有时甚至更糟.但DNA也为复杂疾病带来简单的答案,存储奇怪的文件 ...