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 变量。在模板中使用数据绑定来显示时间。

相关推荐
i220818 Faiz Ul3 分钟前
在线预约导游|基于SSM+vue的在线预约导游系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·在线预约导游系统
ZC跨境爬虫4 分钟前
跟着 MDN 学CSS day_35:浮动布局完全指南
前端·css·ui·html·tensorflow
魔士于安8 分钟前
红色文化馆技术文档
前端·unity·游戏引擎·贴图·模型
何何____11 分钟前
js的数据存储机制
开发语言·前端·javascript·ecmascript
无风听海21 分钟前
构建现代 Web 应用的令牌安全体系:Refresh Token Rotation、HttpOnly Cookie 与 Grace Period 全解析
前端·安全
云水一下22 分钟前
JavaScript 从零基础到精通系列:对象、数组与 ES6 数据操作利器
前端·javascript
四代水门23 分钟前
服务端倒带(Server-Side Rewind)命中判定系统
java·前端·算法
宋浮檀s24 分钟前
应急响应——Web高危漏洞应急(SQL注入+XSS跨站+文件上传)
前端·网络·安全·web安全·xss
前端后腿哥24 分钟前
UNIAPPX UTS插件Widget开发完整教程(Android版)
前端·uni-app
MaCa .BaKa24 分钟前
56-非遗手工艺品定制平台系统
java·vue.js·spring boot·mysql·maven·非遗手工制作平台系统·非遗制作