vue获取当前实际时间,格式为2022-01-01 10:10:10

在 Vue 中获取当前实际时间的格式为 2022-01-01 10:10:10 的方法如下:

1. 在 Vue 的 data 中定义一个变量 currentTime, 用于存储当前时间

   data() {
     return {
    currentTime: ''
     }
   }
   

2. 在 created 钩子函数中获取当前时间, 并将其赋值给 currentTime

   created() {
     this.currentTime = new Date().toLocaleString()
   }
   

3. 在模板中使用 {{ currentTime }} 显示当前时间

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

4. 使用filter转换成目标格式

   <template><div>
    {{ currentTime | formatTime }}
     </div>
   </template>
   filters: {
     formatTime(val) {
    let date = new Date(val)
    let y = date.getFullYear()
    let m = (date.getMonth() + 1 + "").padStart(2, "0")
    let d = (date.getDate() + "").padStart(2, "0")
    let h = (date.getHours() + "").padStart(2, "0")
    let min = (date.getMinutes() + "").padStart(2, "0")
    let s = (date.getSeconds() + "").padStart(2, "0")
    return `${y}-${m}-${d} ${h}:${min}:${s}`
     }
   }
   

5. 如果需要定时刷新,可以使用setInterval函数

   created() {
     setInterval(() => {
    this.currentTime = new Date().toLocaleString()
     }, 1000)
   }
   

6. 也可以使用vue-moment库 ``` // 先安装 npm install vue-moment

//main.js import Vue from 'vue' import moment from 'moment'

Vue.use(moment)

//template

{{ $moment().format('YYYY-MM-DD HH:mm:ss') }}