vue之moment的使用方式

目录
  • 前言
  • 一、moment是什么?
  • 二、使用步骤(例:默认查询时间24小时之前~当前时间)
  • 三、日期格式
  • 四、new Date() 相关

前言

在日常开发中,我们常常会遇到以下几种场景:

需要对日期进行非标准格式展示,如 :2021年5月11日星期二下午6点42分

需要对日期进行处理,如:要取前24小时的时间 等

在这时候用js原生的new Date()处理就有些麻烦了,因此我们找到了moment这个类库

一、moment是什么?

moment 是一个 JavaScript 日期处理类库。

注:以下所有时间相对于现在时间:2021/05/11/18:42 星期二

1.日期格式化:

moment().format('MMMM Do YYYY, h:mm:ss a'); // 五月 11日 2021, 6:42:31 下午
moment().format('dddd'); // 星期二
moment().format("MMM Do YY"); // 5月 11日 21
moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021
moment().format(); //2021-05-11T18:06:42+08:00

2.相对时间:

moment("20111031", "YYYYMMDD").fromNow(); // 2011/10/31号相对于现在是: 10 年前
moment("20120620", "YYYYMMDD").fromNow(); // 2012/06/20号相对于现在是: 9 年前
moment().startOf('day').fromNow(); //当前日期开始即:2021/05/11/00:00:00相对于现在是: 19 小时前
moment().endOf('day').fromNow(); //当前日期结束即:2021/05/11/24:00:00相对于现在是: 5 小时内
moment().startOf('hour').fromNow(); //当前日期小时开始即:2021/05/11/18:00:00相对于现在是: 42分钟前

3.日历时间:

moment().subtract(10, 'days').calendar(); // 当前时间往前推10天的日历时间: 2021/05/01
moment().subtract(6, 'days').calendar(); // 当前时间往前推6天: 上星期三18:42
moment().subtract(3, 'days').calendar(); // 当前时间往前推3天: 上星期六18:42
moment().subtract(1, 'days').calendar(); // 当前时间往前推1天: 昨天18:42
moment().calendar(); // 今天18:42
moment().add(1, 'days').calendar(); // 当前时间往后推1天: 明天18:42
moment().add(3, 'days').calendar(); // 当前时间往后推3天: 下星期五18:42
moment().add(10, 'days').calendar(); // 当前时间往后推10天: 2021/05/21

4.多语言支持:

moment.locale(); // zh-cn
moment().format('LT'); // 18:42
moment().format('LTS'); // 18:42:31
moment().format('L'); // 2021/05/11
moment().format('l'); // 2021/5/11
moment().format('LL'); // 2021年5月11日
moment().format('ll'); // 2021年5月11日
moment().format('LLL'); // 2021年5月11日下午6点42分
moment().format('lll'); // 2021年5月11日 18:42
moment().format('LLLL'); // 2021年5月11日星期二下午6点42分
moment().format('llll'); // 2021年5月11日星期二 18:42

二、使用步骤(例:默认查询时间24小时之前~当前时间)

1.引入库

$ npm install moment --save

2.在main.js中全局引入(也可单独在使用的文件中引入,具体看需求)

import moment from "moment"
Vue.prototype.$moment = moment;

3.在需要使用日期的地方使用

HTML中:

 <el-date-picker
        v-model="timeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
 </el-date-picker>

JS中:

 data() {
      return {
         timeRange:[],
      }
   },
  mounted(){
        let start = this.$moment()
            .subtract('1', 'd')
            .format('YYYY-MM-DD HH:mm:ss') //当前时间往前推1天(24小时):2021-05-10 18:42:53
        let end = this.$moment().format('YYYY-MM-DD HH:mm:ss') //当前时间:2021-05-11 18:42:53
        this.timeRange=[start,end]
   },  

三、日期格式

格式 含义 举例 备注
yyyy 2021 同YYYY
M 1 不补0
MM 01  
d 2 不补0
dd 02  
dddd 星期 星期二  
H 小时 3 24小时制;不补0
HH 小时 18 24小时制
h 小时 3 12小时制,须和 A 或 a 使用;不补0
hh 小时 03 12小时制,须和 A 或 a 使用
m 分钟 4 不补0
mm 分钟 04  
s 5 不补0
ss 05  
A AM/PM AM 仅 format 可用,大写
a am/pm am 仅 format 可用,小写

具体方法以及参数可详见moment官方文档

四、new Date() 相关

日期都写这么多了,那new Date()也一起总结下吧

	let time = new Date();  //获取当前时间  Tue May 11 2021 18:42:51 GMT+0800 (中国标准时间)
    let year = time.getFullYear();  //获取年 2021
    let month = time.getMonth() + 1;  //获取月  5
    let day = time.getDate();    //获取天  11
    let h = time.getHours();   //获取小时  18
    let m = time.getMinutes();  //获取分钟  42
    let s = time.getSeconds();    //获取秒  51
    let weekDay = time.getDay();  //获取星期  2

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 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开发之moment的介绍与使用

    前言 在日常开发中,我们常常会遇到以下几种场景: 需要对日期进行非标准格式展示,如 :2021年5月11日星期二下午6点42分 需要对日期进行处理,如:要取前24小时的时间 等 在这时候用js原生的new Date()处理就有些麻烦了,因此我们找到了moment这个类库 一.moment是什么? moment 是一个 JavaScript 日期处理类库. 安装 moment 如果之前安装过就不用再安装了. npm install moment -- save 注:以下所有时间相对于现在时间:20

  • vue如何使用moment处理时间戳转换成日期或时间格式

    目录 一.使用环境 二.安装moment 三.在vue所需页面进行引入 五.最终效果 六.moment中文官网 总结 一.使用环境 Moment 被设计为在浏览器和 Node.js 中都能工作. 所有的代码都应该在这两种环境中都可以工作,并且所有的单元测试都应该在这两种环境中运行. CI 系统当前使用以下的浏览器:Windows XP 上的 Chrome,Windows 7 上的 IE 8.9 和 10,Windows 10 上的 IE 11,Linux 上最新的 Firefox,OSX 10.

  • Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    在vue-cli 2.0时代,webpack的配置是有独立文件的,包含在build目录下,修改也比较方便 到vue-cli 3.0后,webpack配置被整合到vue-cli的配置中了,需要配置一些打包插件比较麻烦了,比如优化momentjs压缩包,使用webpack-bundle-analyzer等- 研究后发现vue-cli 3.0使用了chainWebpack来支持额外的插件配置,其实和2.0是差不多的 我们这里使用momentjs,lodash和webpack-bundle-analyz

  • 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

  • jquery在vue脚手架中的使用方式示例

    本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

  • vue组件间通信六种方式(总结篇)

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • vue组件传值的实现方式小结【三种方式】

    本文实例讲述了vue组件传值的实现方式.分享给大家供大家参考,具体如下: 前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1.父传子 子组件的代码: <template> <div id="container"&

  • vue prop传值类型检验方式

    prop 传值检验规则 如果是 prop 是静态传值,则必须是 String 类型 如果是 prop 是动态传值,则可以验证任意类型 示例,如果必须要传一个Number,就必须使用 bind //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTitle }}</h3>"

  • 详解Vue的七种传值方式

    1,父传子 子组件中定义props字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式).如下图的例子,父组件挂载子组件HelloWorld,在组件标签上给title赋值,子组件HelloWorld定义props,里面有一个值是title,这样子组件就可以使用父组件的值了. 父组件 <template> <div> <HelloWorld :title="msg" /> </div> </template> <

  • 浅谈vue中所有的封装方式总结

    目录 1.封装API 2.注册全局工具组件 3.封装全局函数 4. 为了减少页面代码量的封装 如何确定我需要封装呢? 1.复用,如果觉得以后还会用到 2.你觉得方便,别的地方可能也需要用 3.如果不封装,页面代码臃肿的时候 1.封装API 使用场景:业务中最常见最普通的封装 步骤一: 步骤二:  步骤三:  2.注册全局工具组件 使用场景:想让组件全局可用,尤其是第三方插件使用时 步骤一:   步骤二: 3.封装全局函数 使用场景:有些逻辑处理函数代码量很大,且具有独特功能(如日期处理函数,数组

  • 基于Vue实现自定义组件的方式引入图标

    前言 在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境 这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co

  • 八种vue实现组建通信的方式

    目录 一.组件通信 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 3.bus(事件总线) 兄弟组件通信 4.$parent.$children 直接访问组件实例 5.$refs 6.provide/inject(提供/注入) 多组件或深层次组件通信 7.slot(slot-scope作用域插槽) 子元素-->父元素(类似于通信) 8.vuex状态管理 一.组件通信 1.props 父组件--->子组件通信 父组件---属性的方式传值给子组件 子

  • web面试vue自定义组件及调用方式

    引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式 通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用 编码实现 以插件的形式使用组件 // 将要显示的组件导入 import mymodel from '../components/mymodel.vue' export default { install: fu

  • vue实现单点登录的方式汇总

    最近项目停工了,RageFrame的学习暂时告一段落,这一篇给大家分享下有关单点登录的相关知识,并提供一些demo给大家参考,希望对想了解的朋友有一些帮助. 话不多说,先上原理(借鉴地址:https://www.jianshu.com/p/613e44d4a464) 点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站

随机推荐