vue動態實時顯示時間有兩種方法

1.可以NjsZgquPI用day.js,處理日期和時間的js庫

用法 npm install dayjs --save

引入import dayjs from 'dayjs'

然後建立定時器更新最新的時間

this.timeId = setInterval(()=>{
   this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss');

},1000);

更多的詳情可以檢視day.js的api

api文件點這裡

2.使用vue過濾器filters

<template>
  <el-container id="box">
       {{ date | formaDate }}
  </el-container>
</template>
<script>
 //建立一個函式來增加月日時小於10在前面加0
   var padaDate = function(value){
      return value<10 NjSZgquPI
 
3; '0'+value : value;
   };
export default {
  data() {
    return {
   www.cppcns.com   date: new Date(),//實時時間
    };
  },watch: {
   
程式設計客棧  },computed: {},filters:{
    //設定一個函式來進行過濾
    formaDate:function(value){
       //建立一個時間日期物件
       var date = new Date();
       var year = date.getFullYear();      //儲存年
       var month = padaDate(date.getMonth()+1);    //儲存月份
       var day = padaDate(date.getDate());         //儲存日期
       var hours = padaDate(date.getHours());      //儲存時
       var minutes = padaDate(date.getMinutes());  //儲存分
       var seconds = padaDate(date.getSeconds());  //儲存秒
       //返回格式化後的日期
       return year+'年'+month+'月'+day+'日'+hours+'時'+minutes+'分'+seconds+'秒';
     }
  },methods: {
   
  },created() {
    
  },mounted() {
    //建立定時器更新最新的時間
    var _this = this;
    this.timeId = setInterval(function() {
      _this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss');
    },1000);
    this.initmap();
  },beforeDestroy: function() {
    //例項銷燬前青出於定時器
    if (this.timeId) {
      clearInterval(this.timeId);
    }
  }
};
</script>
<style lang="s
 
css" scoped>
 
</style>

附：vue時間戳 獲取本地時間，NjSZgquPI實時更新

<template>
	<p>當前時間：{{nowTime}}</p>
</template>

<script>
	export default{
		data(){
			return{
				nowTime:""
			}
		},methods:{
			getTime(){
				setInterval(()=>{
					//new Date() new一個data物件，當前日期和時間
					//toLocaleString() 方法可根據本地時間把 Date 物件轉換為字串，並返回結果。
					this.nowtime = new Date().toLocaleString();
				},1000)
			}
		},created(){
			this.getTime();
		}
	}
</script>

總結

到此這篇關於vue如何動態實時顯示時間的文章就介紹到這了,更多相關vue動態實時顯示時間內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！