Vue.js时间格式化处理

1.首先在vue项目中安装moment

npm install moment --save

2. 定义时间格式化全局过滤器，在dateUtil.js中或组件中导入该组件

import moment from 'moment'

dateUtil.js代码：

import moment from "moment";function dateFormat(data) {return moment(new Date(data).getTime()).format('YYYY-MM-DD HH:mm');;}export {dateFormat}

3. 使用方法一

3.1在全局中定义时间格式化

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

3.2在main.js中或组件中导入该组件

import moment from 'moment'

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

<div><span>{{item.publishdate | datefmt('MM/DD')}}</span><span>{{item.publishdate | datefmt('YYYY')}}</span></div>

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

4.使用用法二：

如果我们项目所需的格式都是统一格式的（例如都显示为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>

5.使用用法三

const data  =  moment(时间戳).format('YYYY-MM-DD HH:mm:ss')console.log(data)   //    "2019-05-25 08:23:56"

6.时间转时间戳

直接把字符串传到Date对象里他会帮你转成时间的

var timeStr1 = '2018/08/08';var timeStr2 = '2018/12/12';var time1 = new Date(timeStr1).getTime();var time2 = new Date(timeStr2).getTime();console.log(time1 )  //   1558972800000

7．由于后台传到前台的数据是字符串类型，所以我们现将时间字符串转化为时间戳，再把时间戳转为自己想要的格式

7.1创建一个通用工具类dateUtil.js代码：

import moment from "moment";function dateFormat(data) {return moment(new Date(data).getTime()).format('YYYY-MM-DD HH:mm');;}export {dateFormat}

7.2然后在组件中引入dateUtil.js

import { dateFormat } from '../utils/dateUtil';

7.3在methods方法中定义该js名称。

methods: {// 加载用户分页数据dateFormat,……………………

7.4在需要格式化时，直接将后台传过来的对象遍历得到时间，将时间传到该方法中即可：

 this.tableData = resp.data.data.list;for(let i = 0; i < this.tableData.length; i++) {this.tableData[i].updateTime = this.dateFormat(this.tableData[i].updateTime)}

Vue.js时间格式化处理相关推荐

时间戳显示为多少分钟前，多少天前的JS处理，JS时间格式化，时间戳的转换
var dateDiff = function (timestamp) {// 补全为13位var arrTimestamp = (timestamp + '').split('');for (var ...
js时间格式化函数，支持Unix时间戳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
原生js时间格式化方法封装
原生js时间格式化方法封装创建formatDate函数,传入date(时间)和format(格式)两个参数,简单判断format返回相应格式的时间注意:getMonth()方法获取到的月份会比实际 ...
js时间格式化几分钟前、几小时前
时间格式化几分钟前.几小时前当前时间:2019-07-29 10:21:00 //打印 console.log(app.getDateDiff('2019-07-29 10:20:00')) //输 ...
js时间格式化函数（兼容IOS）
* 时间格式化* @param {Object} dateObj 时间对象* @param {String} fmt 格式化字符串*/dateFormat(dateObj, fmt) {let dat ...
Vue中利用moment.js(时间格式化插件)做一个倒计时组件
moment.js 文档:https://momentjs.com/docs/#/-project-status/ 1.使用npm安装moment npm install moment --save ...
js时间格式化通用方法
/** * 时间工具类 */ /** * 获取现在的时间戳(精确到s) * 使用:new Date().nowTimestamp * @type {number} */ Date.prototype. ...
Moment.js 时间格式化插件
1.引入 npm install moment --save 2.js配置 import moment from 'moment'; // 更改时间格式momentTime(time) {let ne ...
js时间格式化 YYYY/MM/DD HH:MM:SSS
/*** 将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式* @param time*/ function timeFormat(time ...