vue获取当前的时间

当我们想要在vue中实时的获取最新的时间，可以使用下面的方法：

<script>
export default {
  data() {
    return {
      timer: "", //定义一个定时器的变量
      currentTime:
        new Date().getFullYear() +
        "-" +
        new Date().getMonth() +
        1 +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds(), // 获取当前时间
    }
  },
  created() {
    var vm = this
    vm.timer = setInterval(() => {
      var y = new Date().getFullYear()
      var m = vm.appendZero(new Date().getMonth() + 1)
      var d = vm.appendZero(new Date().getDate())
      var ho = vm.appendZero(new Date().getHours())
      var mi = vm.appendZero(new Date().getMinutes())
      var se = vm.appendZero(new Date().getSeconds())
      //修改数据date
      vm.currentTime = y + "-" + m + "-" + d + " " + ho + ":" + mi + ":" + se
    }, 1000)
  },
  methods: {
    //时间过滤加0
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj
      } else {
        return obj
      }
    },
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
}
</script>

然后在模板中使用

 <div class="time">
    {{ currentTime }}
 </div>

就可以实现一个获取当前时间的一个效果