vue動態實時的顯示時間

有兩種方法

1.可以用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文檔點這里：https://github.com/iamkun/dayjs/blob/master/docs/zh-cn/API-reference.md

2.使用vue過濾器filters

<template>
  <el-container id="box">
       {{ date | formaDate }}
  </el-container>
</template>
<script>
 //創建一個函數來增加月日時小於10在前面加0
   var padaDate = function(value){
      return value<10 ? '0'+value : value;
   };
export default {
  data() {
    return {
      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="scss" scoped>

</style>