vue 定义动态时间

最新推荐文章于 2024-07-20 10:04:47 发布

m0_45303218

最新推荐文章于 2024-07-20 10:04:47 发布

阅读量169

点赞数

文章标签： vue.js css jquery css3 scss

本文链接：https://blog.youkuaiyun.com/m0_45303218/article/details/129197986

版权

在Vue.js应用中，创建了一个div元素用于显示当前时间，通过`created`生命周期钩子设置定时器每秒更新`nowTime`属性，展示本地时间。在`beforeDestroy`时清除定时器，防止内存泄漏。

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

在template里面

<div class="dongtaitime">  
                <div class="bgsj">报告时间:&nbsp;&nbsp;{{nowTime}}</div> 
</div>

在script里面

data() {
    return {
      // 动态时间定义
      timer: undefined,
      nowTime: new Date()
}
  created() {
  //时间1方法
  // 要显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值开启定时
  this.timer = setInterval(() => {
    this.nowTime = new Date().toLocaleString();
  });
  
  },
  // 关闭页面销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },