vue中如何获取当时时间时分秒

在 Vue 中可以使用 JavaScript 中的 Date 对象来获取当前时间,然后使用 Vue 中的数据绑定将时间显示在页面上。

html 复制代码
<template>
  <div>
    <p>当前时间:{{ time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: ''
    }
  },
  mounted() {
    this.getTime()
  },
  methods: {
    getTime() {
      const date = new Date()
      const hours = date.getHours()
      const minutes = date.getMinutes()
      const seconds = date.getSeconds()
      this.time = `${hours}:${minutes}:${seconds}`
      setInterval(() => {
        const date = new Date()
        const hours = date.getHours()
        const minutes = date.getMinutes()
        const seconds = date.getSeconds()
        this.time = `${hours}:${minutes}:${seconds}`
      }, 1000)
    }
  }
}
</script>

在上面的示例中,mounted 钩子函数会在组件挂载后立即执行 this.getTime() 方法来获取时间。getTime() 方法使用 setInterval 来定时获取时间,并将时间格式化成时分秒的形式,然后将其赋值给 this.time 变量。在模板中使用数据绑定来显示时间。

相关推荐
我是小疯子66几秒前
jQuery快速入门指南
前端
萌萌哒草头将军1 分钟前
Node.js 存在多个严重安全漏洞!官方建议尽快升级🚀🚀🚀
vue.js·react.js·node.js
程序猿的程1 分钟前
我用 stock-sdk 构建了一个个人专属的 A 股行情仪表盘
javascript·web前端
傻啦嘿哟3 分钟前
Python中的@property:优雅控制类成员访问的魔法
前端·数据库·python
这个图像胖嘟嘟13 分钟前
前端开发的基本运行环境配置
开发语言·javascript·vue.js·react.js·typescript·npm·node.js
北辰alk17 分钟前
Vue 自定义指令生命周期钩子完全指南
前端·vue.js
是小崔啊17 分钟前
03-vue2
前端·javascript·vue.js
学习非暴力沟通的程序员37 分钟前
Karabiner-Elements 豆包语音输入一键启停操作手册
前端
Jing_Rainbow44 分钟前
【 前端三剑客-39 /Lesson65(2025-12-12)】从基础几何图形到方向符号的演进与应用📐➡️🪜➡️🥧➡️⭕➡️🛞➡️🧭
前端·css·html
刘羡阳1 小时前
使用Web Worker的经历
前端·javascript