第一种方式：

- 代码如下： <template><div id="homeHeader" class="clearfix"> <div class="nav clearfix" > 当前时间是：<a class="datastyle txt">{{date | formatDateTime}}</a> </div></div></template><script>export default {name: "homeHeader",data() {return {date: new Date(), };},filters: {formatDateTime(value) {let date = new Date(value);let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? "0" + MM : MM;let d = date.getDate();d = d < 10 ? "0" + d : d;let h = date.getHours();h = h < 10 ? "0" + h : h;let m = date.getMinutes();m = m < 10 ? "0" + m : m;let s = date.getSeconds();s = s < 10 ? "0" + s : s;return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;}},mounted() {var that = this;this.timer = setInterval(() => {that.date = new Date(); //修改数据date}, 1000);},beforeDestroy() {if (this.timer) {clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器}}, };</script>

• 根据项目的中的需求，可以自行改动

原文参考

-------------------------------------------------------------------------------------------------------------------------------

第二种方式：

• 代码如下：

<template><div class="header-file"><el-header class="header"><div>{{ nowDate + ' ' + nowTime + ' ' + nowWeek }}</div></el-header></div> </template><script> export default {data() {return {nowDate: "", // 当前日期nowTime: "", // 当前时间nowWeek: "" // 当前星期};},methods: {currentTime() {setInterval(this.getDate, 500);},getDate: function() {var _this = this;let yy = new Date().getFullYear();let mm = new Date().getMonth() + 1;let dd = new Date().getDate();let week = new Date().getDay();let hh = new Date().getHours();let mf =new Date().getMinutes() < 10? "0" + new Date().getMinutes(): new Date().getMinutes();if (week == 1) {this.nowWeek = "星期一";} else if (week == 2) {this.nowWeek = "星期二";} else if (week == 3) {this.nowWeek = "星期三";} else if (week == 4) {this.nowWeek = "星期四";} else if (week == 5) {this.nowWeek = "星期五";} else if (week == 6) {this.nowWeek = "星期六";} else {this.nowWeek = "星期日";}_this.nowTime = hh + ":" + mf;_this.nowDate = yy + "-" + mm + "-" + dd;}},mounted() {this.currentTime();},// 销毁定时器beforeDestroy: function() {if (this.getDate) {console.log("销毁定时器")clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器}} }; </script>

原文参考

总结

以上是生活随笔为你收集整理的Vue如何获取当前时间的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。