vue-獲取實時時間

效果：

 

 

上代碼：

 

<template>

  <div>

      <div>{{date | formatDateTime}}</div>

  </div>

</template>

 

<script>

import { format } from 'path';

export default {

  name: '',

  components: {},

  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(){

      let _this = this;

      this.timer = setInterval(function(){

          _this.date =new Date();

      },1000);

  },

 beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer); // 在Vue實例銷燬前，清除我們的定時器

    }

  },

}

</script>

<style>

</style>