vue实现时间实时更新

最新推荐文章于 2025-03-18 15:38:11 发布

微雨即至

最新推荐文章于 2025-03-18 15:38:11 发布

阅读量2k

点赞数 1

文章标签： vue 前端 js

本文链接：https://blog.csdn.net/weixin_45665589/article/details/120634318

版权

这篇博客分享了在Vue项目中如何实现实时显示当前时间、日期和未来三天天气预报，通过设置定时器和利用Vue的响应式特性，达到数据实时更新的效果。代码示例展示了如何在模板和脚本部分操作，确保时间信息每秒更新并显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天在写地图项目，有一个需求为实时显示现在的时间，原来我写的代码有一点问题就是刷新了时间才会更新，而不是实时更新，在网上查阅了一些博客，感觉部分同学写的不是很对，于是便有了这篇博客
先来看效果图：
在这里插入图片描述
下面展示具体的代码：
vue的template部分

<div class = "left"><p>{
  { time }}</p><p>{
  { date }} {
  { weekday }}</p></div>
<div class = "right"><p>{
  { city }}</p><p>{
  { weather }}</p></div>

<div class = "bottom">
    <div v-for = "(item,index) in threeDays" :key = "index">
         <p>{
  { days[index] }}</p>
         <p>{
  { item.type }}</p>
         <p>{
  { item.low }}/{
  { item