Vue小demo时间格式化

<template >
  <!-- 时间格式化 -->
  <div class="time">
    <span>{{ time.years }}</span
    >- <span>{{ time.mouths | mouChange}}</span
    >-
    <span>{{ time.days | dayChange}}</span>
    <span>{{ time.hours |hoursChange}}</span
    >: <span>{{ time.minutes |minChange }}</span
    >:
    <span>{{ time.seconds |secChange}}</span>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      time: {
        years: 0,
        mouths: 0,
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
      },
      setTimeID: null,
    };
  },
  methods: {
    myTime: function () {
      let _self = this;
      let mydate = new Date();
      console.log(mydate);
      _self.time.years = mydate.getFullYear();
      _self.time.mouths = mydate.getMonth() + 1;
      _self.time.days = mydate.getDate();
      _self.time.hours = mydate.getHours();
      _self.time.minutes = mydate.getMinutes();
      _self.time.seconds = mydate.getSeconds();
    },
    setTime: function () {
      let _self = this;
      _self.setTimeID = setInterval(_self.myTime, 1000);
    },
  },
  // 过滤器
  // filters注意是一个对象！！！里面是声明的各过滤器方法！
  filters:{
    mouChange:function(mouths){
      if(mouths<10){
        mouths = "0"+ mouths
      }
      return mouths
    },
    dayChange:function(days){
      if(days<10){
        days = "0"+ days
      }
      return days
    },
    hoursChange:function(hours){
      if(hours<10){
        hours = "0"+ hours
      }
      return hours
    },
    minChange:function(min){
      if(min<10){
        min = "0"+ min
      }
      return min
    },
    secChange:function(sec){
      if(sec<10){
        sec = "0"+ sec
      }
      return sec
    }
  },
  mounted() {
    let _self = this;
    //执行方法中定义的setTime方法函数
    _self.setTime();
  },
  beforeDestroy:function(){
    //销毁定时器
    let _self  =this;
    clearInterval(_self.setTimeID)
  }
};
</script>
<style scoped>
.time {
  width: 400px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin: 0 auto;
  border: 1px solid green;
}
</style>