vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析

更新時(shí)間：2021年05月13日 11:43:01 作者：小秋菇娘

這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間，以及vue時(shí)間戳獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue動(dòng)態(tài)實(shí)時(shí)顯示時(shí)間有兩種方法

1.可以用day.js,處理日期和時(shí)間的js庫

用法 npm install dayjs --save

引入import dayjs from 'dayjs'

然后創(chuàng)建定時(shí)器更新最新的時(shí)間

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

}, 1000);

更多的詳情可以查看day.js的api

api文檔點(diǎn)這里

2.使用vue過濾器filters

<template>
  <el-container id="box">
       {{ date | formaDate }}
  </el-container>
</template>
<script>
 //創(chuàng)建一個(gè)函數(shù)來增加月日時(shí)小于10在前面加0
   var padaDate = function(value){
      return value<10 ? '0'+value : value;
   };
export default {
  data() {
    return {
      date: new Date(), //實(shí)時(shí)時(shí)間
    };
  },
  watch: {
   
  },
  computed: {},
  filters:{
    //設(shè)置一個(gè)函數(shù)來進(jìn)行過濾
    formaDate:function(value){
       //創(chuàng)建一個(gè)時(shí)間日期對(duì)象
       var date = new Date();
       var year = date.getFullYear();      //存儲(chǔ)年
       var month = padaDate(date.getMonth()+1);    //存儲(chǔ)月份
       var day = padaDate(date.getDate());         //存儲(chǔ)日期
       var hours = padaDate(date.getHours());      //存儲(chǔ)時(shí)
       var minutes = padaDate(date.getMinutes());  //存儲(chǔ)分
       var seconds = padaDate(date.getSeconds());  //存儲(chǔ)秒
       //返回格式化后的日期
       return year+'年'+month+'月'+day+'日'+hours+'時(shí)'+minutes+'分'+seconds+'秒';
     }
  },
  methods: {
   
  },
  created() {
    
  },
  mounted() {
    //創(chuàng)建定時(shí)器更新最新的時(shí)間
    var _this = this;
    this.timeId = setInterval(function() {
      _this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss');
    }, 1000);
    this.initmap();
  },
  beforeDestroy: function() {
    //實(shí)例銷毀前青出于定時(shí)器
    if (this.timeId) {
      clearInterval(this.timeId);
    }
  }
};
</script>
<style lang="scss" scoped>
 
</style>

附：vue時(shí)間戳獲取本地時(shí)間，實(shí)時(shí)更新

<template>
	<p>當(dāng)前時(shí)間：{{nowTime}}</p>
</template>

<script>
	export default{
		data(){
			return{
				nowTime:""
			}
		},
		methods:{
			getTime(){
				setInterval(()=>{
					//new Date() new一個(gè)data對(duì)象，當(dāng)前日期和時(shí)間
					//toLocaleString() 方法可根據(jù)本地時(shí)間把 Date 對(duì)象轉(zhuǎn)換為字符串，并返回結(jié)果。
					this.nowtime = new Date().toLocaleString();
				},1000)
			}
		},
		created(){
			this.getTime();
		}
	}
</script>

總結(jié)

到此這篇關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)顯示時(shí)間的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)實(shí)時(shí)顯示時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: