Vue 中获取当前时间并实时刷新

狂暴草鱼卷

已于 2022-12-22 13:55:06 修改

阅读量4.8k

点赞数 7

分类专栏： # Vue 文章标签： vue.js 前端 javascript

于 2022-12-22 13:54:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47353884/article/details/128407759

版权

Vue 专栏收录该内容

33 篇文章

订阅专栏

在 Vue 组件中使用 JavaScript 内置的 setInterval 函数实现。可以在组件的 created 钩子函数中设置一个定时器，每隔一段时间就更新组件的数据。

export default {
  data() {
    return {
      currentTime: new Date()
    }
  },
  created() {
    setInterval(() => {
      this.currentTime = new Date()
    }, 1000)
  }
}

使用 Vue 的计时器指令 v-bind:interval。这个指令可以在模板中绑定一个数据，每隔一段时间就更新绑定的数据。

<template>
  <div>
    <p v-bind:interval="1000">当前时间：{{ currentTime }}</p>
  </div>
</template>

注意：如果使用计时器指令，要确保 Vue 版本为 2.6.0 或以上。