vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式

你可以使用Vue.js的生命周期钩子函数和原生JavaScript来实现实时显示当前时间并格式化输出。

首先，在Vue组件中，你可以使用data选项来定义一个变量来保存当前时间，例如：

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: ''
    }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.formatDate(new Date())
    }, 1000)
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hours = date.getHours()
      const minutes = date.getMinutes()
      const seconds = date.getSeconds()
      return `${year}-${this.padZero(month)}-${this.padZero(day)} ${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
    },
    padZero(num) {
      return num < 10 ? `0${num}` : num
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为currentTime的变量，然后在mounted生命周期钩子函数中使用setInterval函数每秒更新一次该变量的值。我们还定义了一个名为formatDate的方法来格式化日期，该方法接收一个Date对象作为参数，并返回格式化后的字符串。该方法使用了ES6模板字符串和JavaScript的Date对象的方法来获取年月日时分秒。我们还定义了一个名为padZero的方法来将单数的数字前面补零。

最后，在模板中，我们使用双括号绑定语法来显示currentTime变量的值。

当组件被挂载时，setInterval函数会每秒执行一次回调函数，更新currentTime变量的值。每次更新时，Vue.js会自动更新模板中双括号绑定的值，从而实现实时显示当前时间的效果。