vue利用Moment插件格式化时间的实例代码

2024-10-29 17:40:14

moment是一款多语言支持的日期处理类库，在vue中如何使用呢？首先附上官网地址：http://momentjs.cn/，毕竟查找api才是学习正途！

使用npm命令安装moment

npm install moment --save

在main.js文件里引用moment

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Moment from 'moment'

// 定义全局时间戳过滤器
Vue.filter('formatDate', function(value) {
  return Moment(value).format('YYYY-MM-DD HH:mm:ss')
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在组件里使用

<div class="time">{{item.rateTime | formatDate}}</div>

常用的一些日期格式化方法

日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 四月 16日 2019, 12:24:48 中午
moment().format('dddd');                    // 星期二
moment().format("MMM Do YY");               // 4月 16日 19
moment().format('YYYY [escaped] YYYY');     // 2019 escaped 2019
moment().format();                          // 2019-04-16T12:24:48+08:00

相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 7 年前
moment("20120620", "YYYYMMDD").fromNow(); // 7 年前
moment().startOf('day').fromNow();        // 12 小时前
moment().endOf('day').fromNow();          // 12 小时内
moment().startOf('hour').fromNow();       // 28 分钟前

日历时间

moment().subtract(10, 'days').calendar(); // 2019年4月6日
moment().subtract(6, 'days').calendar();  // 上周三中午12点28
moment().subtract(3, 'days').calendar();  // 上周六中午12点28
moment().subtract(1, 'days').calendar();  // 昨天中午12点28分
moment().calendar();                      // 今天中午12点28分
moment().add(1, 'days').calendar();       // 明天中午12点28分
moment().add(3, 'days').calendar();       // 本周五中午12点28
moment().add(10, 'days').calendar();      // 2019年4月26日

多语言支持

moment().format('L');    // 2019-04-16
moment().format('l');    // 2019-04-16
moment().format('LL');   // 2019年4月16日
moment().format('ll');   // 2019年4月16日
moment().format('LLL');  // 2019年4月16日中午12点28分
moment().format('lll');  // 2019年4月16日中午12点28分
moment().format('LLLL'); // 2019年4月16日星期二中午12点28分
moment().format('llll'); // 2019年4月16日星期二中午12点28分

说明文档

格式代码	说明	返回值
YYYY	四位数字完整表示的年份	如：1999 或 2019
M	数字表示的月份，没有前导零	1 ~ 12
MM	数字表示的月份，没有前导零	01 ~ 12
MMM	三个字母缩写表示的月份	一月 ~ 十二月
MMMM	数字表示的月份，没有前导零	一月 ~ 十二月
M	月份，完整的文本格式	1 ~ 12
D	月份中的第几天，没有前导零	1 ~ 31
DD	月份中的第几天，有前导零	01 ~ 31
d	星期中的第几天，数字表示	0 ~ 6，0 表示周日，6 表示周六
ddd	三个字母表示星期中的第几天	星期日 ~ 星期六
dddd	星期几，完整的星期文本	星期日 ~ 星期六
HH	小时，24小时制，有前导零	00 ~ 23
H	小时，24小时制，无前导零	0 ~ 23
hh	小时，12小时制，有前导零	00 ~ 12
h	小时，12小时制，无前导零	0 ~ 12
mm	分钟，有前导零	00 ~ 59
m	分钟，没有前导零	0 ~ 59
ss	秒，有前导零	01 ~ 59
s	秒，无前导零	1 ~ 59

总结

到此这篇关于vue利用Moment插件格式化时间的文章就介绍到这了,更多相关vue用Moment格式化时间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue中格式化时间过滤器代码实例

本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <
vue+moment实现倒计时效果

本文实例为大家分享了vue+moment实现倒计时的具体代码,供大家参考,具体内容如下示例代码  <span>{{countDown(endDate)}}</span> /*引入日期插件*/ import moment from 'moment' export default { data() { return { now: moment(), endDate: '2019-05-07 08:20:00', } }, mo
vue时间格式化实例代码

整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享. export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h
vue.js实现格式化时间并每秒更新显示功能示例

本文实例讲述了vue.js实现格式化时间并每秒更新显示功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=
vue中的过滤器及其时间格式化问题

一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由管道符号指示:  {{ message | capitalize }}  <div v-bind:id="rawId | formatId">
vue利用Moment插件格式化时间的实例代码

moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?首先附上官网地址:http://momentjs.cn/, 毕竟查找api才是学习正途! 使用npm命令安装moment npm install moment --save 在main.js文件里引用moment // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in we
使用Vue动态生成form表单的实例代码

具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa
Vue press 支持图片放大功能的实例代码

介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好.然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA).当用户在浏览站点时,可以按需加载其他页面. 前两天接触到了 Vuepress ,颜值很高,界面简洁,容易上手.于是
JavaScript比较同一天的时间大小实例代码

在项目开发的过程中,有时候会遇到同一天内的时间大小比较,一般来说选择时间是通过插件实现的,但并不排除客户要求手动输入的情况. 那么,在应客户要求手动输入时间,并且需要进行时间大小比较的时候该如何实现呢?以下简单介绍我实现的方法步骤: 1.首先,获取用户输入的内容: 2.验证时间格式是否正确: 3.比较两个时间的大小(整理了三种比较时间的方法,详情请查看以下代码): 4.返回结果. 以下为示例代码,仅做参考: 1.获取用户输入的两个时间,并将用户输入的冒号全部替换为半角冒号,方便后续操作: var
vue操作动画的记录animate.css实例代码

transition动画 //使用动画库animate.css <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'> //其中duration是绑定动画的时间统一设置进入与出去的时间 <h3 v-if='flag'>这里是动画的内容</h3> </transition > //也可以这样使用 &l
Vue中的组件及路由使用实例代码详解

1.组件是什么组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用全局组件 <body> <div id="app">  <myzujian></myzujian> </div> </body> <script>
vue.js层叠轮播效果的实例代码

最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因工作繁忙,暂时不做梳理了:直接贴代码参考: 此组件是基于jquer封装,在vue项目中使用首先需要先安装jquery插件:指令:npm install jquery,安装完成之后再webpack.base.conf.js配置插件: plugins: [ new webpack.ProvidePlug
JS获取当前时间的实例代码(昨天、今天、明天)

1.时间格式化 //昨天的时间 var day1 = new Date(); day1.setTime(day1.getTime()-24*60*60*1000); var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate(); //今天的时间 var day2 = new Date(); day2.setTime(day2.getTime()); var s2 = day2
bootstrap table表格插件之服务器端分页实例代码

Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo
vue+node 实现视频在线播放的实例代码

1.node服务端数据流传输,可在线缓存 //获取参数 var params=urldeal.parse(req.url,true).query const ROOT_PATH = process.cwd();//必须使用绝对路径,使用相对路径会直接下载文件 let path =ROOT_PATH+params.url; let stat = fs.statSync(path); //获取文件信息 let fileSize = stat.size; let range = req.header

vue利用Moment插件格式化时间的实例代码

相关推荐

随机推荐