一、Vue时间格式化
在Vue项目中，我们常常需要对日期时间进行格式化操作。在Vue中，moment、date-fns等库都可以帮我们快速地实现时间格式化，但是对于体积较大或者考虑简洁性的项目，我们可以使用一个简单的Vue过滤器来实现时间格式化的功能。
在Vue项目中，通过过滤器实现时间格式化，只需要在Vue实例中定义一个名为date的过滤器，将需要显示的时间传入，然后调用JavaScript中Date的相关方法，最后输出符合要求的时间即可。
Vue.filter('date', function (input, fmtstring) {
if (!input) { return ''; }
moment.defaultFormat = fmtstring;
return moment(input).format(fmtstring);
});
在上述代码中，我们引入了moment.js库，并通过Vue.filter()方法定义了一个名为date的过滤器，该过滤器需要两个参数：input和fmtstring，其中input为需要进行时间转换的时间戳，fmtstring为需要将该时间戳转换成的时间格式。最后，我们使用moment(input).format(fmtstring)将时间戳转换为我们想要的时间格式。
二、Vue时间戳转换为时间格式
Vue时间戳转换为时间格式也相对比较简单。在Vue中，我们可以通过JavaScript中的Date方法对时间戳进行转换。
// timestamp为时间戳，format为格式化后的时间格式
Vue.prototype.formatDate = function(timestamp, format) {
let date = new Date(timestamp * 1000); // 时间戳转换为毫秒
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
if (format && format.length === 14) {
return year + format.substr(0, 2) + month + format.substr(2, 2) + day + format.substr(4, 2) + hour + format.substr(6, 2) + minute + format.substr(8, 2) + second + format.substr(10, 4);
} else {
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
}
在上述代码中，我们在Vue实例中定义了一个名为formatDate的方法，该方法需要两个参数：timestamp和format。其中，timestamp为需要进行转换的时间戳，format为需要将该时间戳转换成的时间格式。
在该方法中，我们首先将时间戳转换为毫秒，然后提取出年、月、日、时、分、秒等信息，最后根据需要将这些信息以指定格式返回即可。如果format格式为14位，则按照format格式返回；否则按照”yyyy-MM-dd HH:mm:ss”格式返回。
三、Vue时间转换为时间戳
在Vue项目中，我们通常需要将时间转换为时间戳，以便更好地进行数据比较或者通过ajax请求传递给后端。在Vue中，我们可以通过JavaScript中的Date方法将时间转换为时间戳。
// time为需要进行转换的时间，format为该时间的格式
Vue.prototype.getTimestamp = function (time, format) {
let date = moment(time, format); // 将时间转换成moment类对象
let timestamp = Math.round(date.valueOf() / 1000); // 获取时间戳，单位为秒
return timestamp;
}
在上述代码中，我们在Vue实例中定义了一个名为getTimestamp的方法，该方法需要两个参数：time和format。其中，time为需要进行转换的时间，format为该时间的格式。
在该方法中，我们首先将传入的时间和格式使用moment()方法转换为moment类对象，然后调用valueOf()方法获取该时间对应的毫秒数。最后，我们将该毫秒数除以1000，将时间戳单位转换为秒并取整。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300725.html
微信扫一扫 
支付宝扫一扫 