VUE实时显示当前时间

这篇具有很好参考价值的文章主要介绍了VUE实时显示当前时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        做大屏页面的时候要求在页面上加上当前时间,实现此功能的写法有很多种,我的源码如下,各位拿了直接用就行(根据自己的需求修改下样式):

<template>
  <div style="text-align: center;padding-top: 100px">
    当前时间:{{ nowTime }}
  </div>
</template>
<script>

export default {
  data() {
    return {
      nowTime: ''
    };
  },
  mounted() {
    this.getNowTime();

  },
  methods: {
    getNowTime () {
      let speed = 1000
      let that = this
      let theNowTime = function () {
        that.nowTime = that.timeNumber()
      }
      setInterval(theNowTime, speed)
    },
    timeNumber () {
      let today = new Date()
      let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
      let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
      return date + '  ' + time
    },
    twoDigits (val) {
      if (val < 10) return '0' + val
      return val
    },
  },
}
</script>

页面效果:

VUE实时显示当前时间

 文章来源地址https://www.toymoban.com/news/detail-509920.html

到了这里,关于VUE实时显示当前时间的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity-DateTime显示当前时间和获取时间戳

    1 显示当前时间,显示的格式为20220506-11:19:30 2 输出单位为秒的时间戳 3 输出单位为毫秒的时间戳

    2024年02月11日
    浏览(37)
  • QT 底部状态栏显示当前日期时间(每秒变化)

    效果如红框显示 首先需要引入三个头文件 其次在头文件定义两个私有变量 最后获取当前时间,设置显示模式,开启定时器 d:天,不补充0占位,1~31 dd:天,补充0占位,01~31 M:月,不补充0占位,1~12 MM:月,补充0占位,01~12 yy:年,两位显示,00~99 yyyy:年,四位显示,000

    2024年02月04日
    浏览(36)
  • javascript设置指定年月日,js动态显示当前时间

    大家好,本文将围绕js中如何动态显示日期时间展开说明,javascript设置指定年月日是一个很多人都想弄明白的事情,想搞清楚js动态显示当前时间需要先了解以下几个事情。 创建showTime()函数,利用JavaScript中的Date对象的属性及方法获取时间,利用Window对象的 setInterval() 方法按

    2024年02月03日
    浏览(118)
  • Axure动态显示实时时间

    Axure制作动态的实时时间(视频右上角) 步骤教学 【新建元件】实时时间的显示区域新建一个动态面板(2个状态面板) 【新建元件】两个状态面板的相同位置,分别新建“一级标题”(实时时间1、实时时间2);注意:最后显示的实时时间的字体样式跟“一级标题”一致,

    2024年02月13日
    浏览(34)
  • Android实时显示时间日期(极简)

    格式 说明 yyyy/MM/dd 年月日 HH:mm:ss 时分秒 EEEE 星期几 EE 周几 属性 对应的方法 说明 android:timeZone setTimeZone(String) 设置时区(设置后即忽略系统时间) android:format12Hour setFormat12Hour(CharSequence) 设置12小时制的格式 android:format24Hour setFormat24Hour(CharSequence) 设置24小时制的格式 – is24HourM

    2024年02月13日
    浏览(43)
  • vue封装-获取当前时间

    在开发时,经常遇到转换时间戳的问题,这里封装了一个方法,方便使用。

    2024年02月13日
    浏览(63)
  • Vue2+Echarts+SpringBoot+Websocket+Scheduled实现大屏图表数据实时展示

    近期在学习websocket的相关技术,用于做前后端的数据实时交互,结合网上资料和个人理解,整理了一个小白入门案例,不喜勿喷!!!!! WebSocket是HTML5下一种新的协议(websocket协议本质上是一个基于tcp的协议) 它实现了浏览器与服务器全双工通信,能更好的节省服务器资源

    2024年02月20日
    浏览(52)
  • 帝国cms内容页模板把当前文章发布时间改成年月号星期几显示方式

    把下面代码加到帝国cms内容页模板最头部 在帝国cms内容页模板需要显示的地方加入以下代码 到此这篇文章就结束了,帝国cms页面支持php非常方便拓展。

    2024年02月03日
    浏览(48)
  • vue关于时间的操作(持续更新)(时间格式化、获取当前系统时间)

    2.1 封装全局过滤器 在utils中创建 filter.js 文件 2.2 在 main.js 进行全局注入 2.3 在其他页面使用

    2024年01月24日
    浏览(48)
  • [Unity学习]使用ScrollRect实现自动滚动到底部显示实时消息,并在拖动的时候取消自动滚动,再次手动滑到底部,又继续自动滚动

    首先需要重写ScrollRect组件: 下面通过协程实现在不滚动ScrollRect的时候,自动滚动到底部。 使用时,写下面类似代码即可: Unity原生Scroll View更改配置如下: 其中ScrollView游戏物体更改组件如下: content配置如下: 实现效果如下: 大功告成!加上对象池模式控制添加的text实例

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包