因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究

插件地址:http://momentjs.cn/

因为没有使用过,所有就开始各种百度,参考各位大佬的总结,大概了解了怎么使用,然后记录下来当做个笔记,免得以后搞忘了

(1)首先在项目目录下安装  npm install moment --save

(2)引入moment

在main.js中引入moment

用法一:

import moment from 'moment'

// 定义一个全局过滤器实现日期格式化
Vue.filter('datefmt', function (input, fmtstring) {
return moment.unix(input).format(fmtstring)
})

这样就可以在我们需要对时间进行格式化的组件中进行使用了,如下:

<div class="news-info-date">
<span class="news-date-span">{{item.publishdate | datefmt('MM/DD')}}</span>
<span>{{item.publishdate | datefmt('YYYY')}}</span>
</div>

这里我有两个span标签,第一个是将时间戳格式为  月/日(11/24)  这样的格式,第二个则是格式化为年份值(如2018这样的)

用法二:

但是如果我们项目所需的格式都是统一格式的(例如都显示为2018-09-06),那么可以在main.js中进行统一格式样式的设置,如下:

Vue.filter('datefmt', function (input, 'YYYY-MM-DD') {
return moment.unix(input).format('YYYY-MM-DD')
})

然后在组件中这样使用即可:

<span>{{item.publishdate | datefmt}}</span>

总结:如果日期格式都是统一的,那么可以在main.js中进行统一设置(方法二),但如果日期格式有所不同,最好是在使用的组件中根据需要设置日期格式(方法一)。当然了,插件官网上还有其他的一些使用说明,比如获取今天是星期几,几天是这个月的几号这样的格式,根据需要引入格式即可...

Vue引入日期格式插件moment.js的更多相关文章

  1. jQuery时间格式插件-moment.js的使用

    jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...

  2. 日期时间插件flatpickr.js使用方法

    今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件.一开始先 ...

  3. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  4. JS和vue中日期格式的转换

    1.获取当前时间: var now=new Date(); //Tue Oct 17 2017 18:08:40 GMT+0800 (中国标准时间) 获取当前时间的日期 new Date().getD ...

  5. [转]nodejs日期时间插件moment.js

    本文转自:https://blog.csdn.net/dreamer2020/article/details/52278478 问题来源js自带的日期Date可以满足一些基本的需求,例如格式化.时间戳 ...

  6. js插件---bootstrap-datepicker.js是什么

    js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...

  7. jQuery滚屏插件XSwitch.js

    1.需要有基本的HTML结构 <div style="margin-top: 124px;" id="container" data-XSwitch> ...

  8. 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

  9. js常规日期格式处理、月历渲染、倒计时函数

    日期格式处理在前端的日常任务中非常常见,但是为此引入monent.js这样的类库又会显得有点臃肿,毕竟我们一个特定的项目中,并不需要monent.js那么全的涵盖范围.另外,如果现在公司让你自己手写一 ...

随机推荐

  1. shell编程:字符串练习题string.sh

    string.sh脚本 #!/bin/bash # string="Bigdata process framework is Hadoop,Hadoop is an open source ...

  2. Springboot+mybatis+dbcp+mysql简单集成

    1.添加依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>m ...

  3. python-模块-包

    一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...

  4. 使用Nuget重新安装packages.config中的组件的方法

    Update-Package -ProjectName 'Ko.app.web' -Reinstall 该语句作用:按照packages.config中给出的程序组件,重新下载安装一遍.

  5. OpenGL学习——绘制矩形

    接下来稍微扩展一步,绘制矩形,即两个拼在一起的三角形. 引入一个概念, EBO Element Buffer Object  元素缓冲对象, EBO用于存放描述“顶点绘制顺序”的对象. 外注:创建VS ...

  6. update 后没有加where条件解决办法

    MySQL 误操作后数据恢复(update,delete忘加where条件) 在数据库日常维护中,开发人员是最让人头痛的,很多时候都会由于SQL语句写的有问题导致服务器出问题,导致资源耗尽.最危险的操 ...

  7. Codeforces 343E 最小割树

    题意及思路:https://www.cnblogs.com/Yuzao/p/8494024.html 最小割树的实现参考了这篇博客:https://www.cnblogs.com/coder-Uran ...

  8. 洛谷P1935 [国家集训队]圈地计划

    题目大意: 有个\(n*m\)的网格图 每个点可以选择\(A\),获得\(A[i][j]\)或选\(B\)获得\(B[i][j]\)的收益 相邻点有\(k\)个不同可以获得\(C[i][j]\)的收益 ...

  9. lombok 注解简单介绍

    一.Lombok 的简单介绍和使用 Lombok是一个可以帮助我们简化 Java 代码编写的工具类,通过采用注解的方式简化了 JavaBean 的编写,使我们写的类更加简洁. 1. 添加 Lombok ...

  10. 聊一聊JavaScript中的事件循环

    一.概念:事件循环 JavaScript是单线程的 1.整片 script 整体代码(第一个宏任务)放到执行栈中,执行之后,会触发很多方法 这些方法只能一个个的顺序执行,不能并发 2.这些要执行的方法 ...