Vue引入日期格式插件moment.js
因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究
插件地址: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的更多相关文章
- jQuery时间格式插件-moment.js的使用
jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...
- 日期时间插件flatpickr.js使用方法
今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件.一开始先 ...
- vue使用日期时间插件layDate
项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...
- JS和vue中日期格式的转换
1.获取当前时间: var now=new Date(); //Tue Oct 17 2017 18:08:40 GMT+0800 (中国标准时间) 获取当前时间的日期 new Date().getD ...
- [转]nodejs日期时间插件moment.js
本文转自:https://blog.csdn.net/dreamer2020/article/details/52278478 问题来源js自带的日期Date可以满足一些基本的需求,例如格式化.时间戳 ...
- js插件---bootstrap-datepicker.js是什么
js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...
- jQuery滚屏插件XSwitch.js
1.需要有基本的HTML结构 <div style="margin-top: 124px;" id="container" data-XSwitch> ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- js常规日期格式处理、月历渲染、倒计时函数
日期格式处理在前端的日常任务中非常常见,但是为此引入monent.js这样的类库又会显得有点臃肿,毕竟我们一个特定的项目中,并不需要monent.js那么全的涵盖范围.另外,如果现在公司让你自己手写一 ...
随机推荐
- JsonSchema 启蒙
jsonSchema 的应用场景有很多,毕竟现在各个接口传输数据基本都是json,比如你做测试想对部分json字段进行校验或者统计你该如何写?解析json获取字段然后if else?不是说不可以但是也 ...
- 聚合函数 -AVG/MAX/MIN/STDDEV/VARIANCE/SUM/COUNT/MEDIAN
------------------------------------------聚合函数--------------------------------------------- --1: AVG ...
- MySQL--分组数据
1.数据分组 #连接数据库 use newschema; #查看表中数据 select *from products: #返回供应商1003提供的产品数目 ; 2.创建分组 select vend_i ...
- POJ-1639 Picnic Planning 度数限制最小生成树
解法参考的论文:https://wenku.baidu.com/view/8abefb175f0e7cd1842536aa.html 觉得网上的代码好像都是用邻接矩阵来实现的,觉得可能数据量大了会比较 ...
- rem_2
html{ font-size:625%; } body{ font-size:0.16rem; }
- 【性能-windows端口限制】TPS上不去,应用无压力只有cpu5%,tomcat线程最高1500,增大并发出现connect 报错
现象:TPS上不去,应用无压力只有cpu5%,tomcat线程够用最高1500,增大并发出现connect 报错 原因:windows端口不够用了,或者不够回收了 解决方案: 1.运行-regedit ...
- Java中static关键字的定义
1.static存在的主要意义 static的主要意义是在于创建独立于具体对象的域变量或者方法.以致于即使没有创建对象,也能使用属性和调用方法! static关键字还有一个比较关键的作用就是 用来形成 ...
- Table边框合并
<style> table, table tr th, table tr td { border: 1px solid #0094ff; } table { width: 200px; m ...
- Delphi 打印纸张选项设置参数
{ paper selections } {$EXTERNALSYM DMPAPER_LETTER} DMPAPER_LETTER = 1; { Letter 8 12 x 11 in } {$EXT ...
- 完爆 Best Fit,看阿里如何优化 Sigma 在线调度策略节约亿级成本
摘要:2018 年“双 11”的交易额又达到了一个历史新高度 2135 亿.相比十年前,我们的交易额增长了 360 多倍,而交易峰值增长了 1200 多倍.相对应的,系统数呈现爆发式增长.系统在支撑“ ...