第一種方式：

- 代碼如下： <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如何获取当前时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。