当前位置：首页 > VUE

vue实现当前时间

2026-03-10 11:25:17VUE

在Vue中获取并显示当前时间可以通过以下方法实现，涵盖基础展示和实时更新两种场景：

基础静态时间显示

直接在组件中初始化一个数据属性，使用JavaScript的Date对象获取当前时间：

<template>
  <div>当前时间: {{ currentTime }}</div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleString()
    }
  }
}
</script>

实时动态更新时间

通过setInterval定时器实现每秒更新，注意在组件销毁时清除定时器防止内存泄漏：

<template>
  <div>实时时间: {{ liveTime }}</div>
</template>

<script>
export default {
  data() {
    return {
      liveTime: '',
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.liveTime = new Date().toLocaleString()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

使用计算属性优化

对于不需要高频更新的场景，可以用计算属性按需计算时间：

<template>
  <div>按需时间: {{ computedTime }}</div>
</template>

<script>
export default {
  computed: {
    computedTime() {
      return new Date().toLocaleString()
    }
  }
}
</script>

格式化时间输出

通过Intl.DateTimeFormat或第三方库（如moment.js/date-fns）自定义格式：

methods: {
  formattedTime() {
    return new Intl.DateTimeFormat('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    }).format(new Date())
  }
}

使用Composition API（Vue3）

在Vue3的setup语法中实现实时时间：

vue实现当前时间

<template>
  <div>Composition时间: {{ time }}</div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
export default {
  setup() {
    const time = ref(new Date().toLocaleString())
    let timer = null

    onMounted(() => {
      timer = setInterval(() => {
        time.value = new Date().toLocaleString()
      }, 1000)
    })

    onBeforeUnmount(() => {
      clearInterval(timer)
    })

    return { time }
  }
}
</script>