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

相关推荐
蜗牛快跑21321 分钟前
DOM元素导出图片与PDF:多种方案对比与实现
前端·javascript·pdf
小彭努力中40 分钟前
50. GLTF格式简介 (Web3D领域JPG)
前端·3d·webgl
It'sMyGo1 小时前
从0开始实现es6 promise类
前端·javascript·es6
冷月秋风尚1 小时前
ES6新标准下关于数组的几个实用改进功能介绍
前端·javascript·es6
qq_544329172 小时前
从0学习React(2)
前端·学习·react.js
NiNg_1_2342 小时前
vue中的vuex详解
前端·vue.js
赵广陆3 小时前
SSM+Vue社区物业管理系统
java·前端·javascript·vue.js·maven
懒洋洋大魔王3 小时前
7.Javaweb-Ajax
前端·ajax·okhttp
Vesper634 小时前
【js】Node.js的fs的使用方法
前端
前端开发菜鸟的自我修养4 小时前
elementUi / elementPlus自定义上传方法 Upload自定义文件上传
前端·javascript·vue.js·阿里云·elementui·七牛云存储