vue.js格式化时间并每秒更新

公用过滤器页面

//在月份、日期、小时等小于10前面补0
let padDate = function (value) {
  return value <10 ? '0' + value:value;
};

let formatDateTime = value => {
  var date = new Date(value);
  var year = date.getFullYear();
  var month = padDate(date.getMonth()+1);
  var day = padDate(date.getDate());
  var hours = padDate(date.getHours());
  var minutes = padDate(date.getMinutes());
  var seconds = padDate(date.getSeconds());
  console.log(1111111111111111111111)
  return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
}

 

页面 

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

</template>
<script>
  /*# vue.js支持在{{  }}插值的尾部添加一个管道符“(|)”
  对数据进行过滤，经常用于格式化文本，比如字母全部大写，
  货币千位使用逗号分隔等。过滤的规则是自定义的，
  通过给vue实例添加选项filters来设置，
  例如对显示时间的格式化处理  */
  var myData = {
    date:new Date()
  };
  //在月份、日期、小时等小于10前面补0
 /* var padDate = function (value) {
    return value <10 ? '0' + value:value;
  };*/
  export default {
    /*props: {
      isShow: {
        type: Boolean,
        default: true
      },
      switchStyle: {
        type: Boolean,
        default: true
      },
      tittle: {
        type: String,
        default: '标题'
      },
      width: {
        type: String,
        default: "35%"
      },
      height: {
        type: String,
        default: "1000px"
      },
    },*/

    data(){
      return {
        date:new Date()

      }
    },
    //实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用
    created:function () {

    },
    //el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
    mounted:function () {
      var _this = this;  //声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function(){
        _this.date = new Date();  //修改数据date
      },1000)
    },
    //实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等
    beforeDestroy:function(){
      if(this.timer){
        clearInterval(this.timer);  //在Vue实例销毁前，清除我们的定时器
      }
    }

  }
</script>
<style scoped>
  .divauto{
    margin:  10px auto 0 auto;
  }
</style>