Vue实例：实时显示当前的时间

最新推荐文章于 2024-06-17 15:58:06 发布

Elylicery

最新推荐文章于 2024-06-17 15:58:06 发布

阅读量1.7k

点赞数

分类专栏：前端demo 文章标签： vue

本文链接：https://blog.csdn.net/sinat_38368658/article/details/107763913

版权

前端demo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

思路

使用 new Date()获取当前时间，利用setInterval每秒更新一次数据
使用过滤器格式化时间的文本显示

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <h1>当前的时间是(实时更新):<br>{{date | formatDate}}</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    //对时间进行格式化处理
    var padDate = function(value){
      return value < 10 ? '0'+ value:value;
    };


    var app = new Vue({
      el:'#app',
      data:{
        date:new Date()
      },
      filters:{
        formatDate: function (value){
          var date = new Date(value);
          var year = date.getFullYear();
          var month = padDate(date.getMonth()+1);
          var day = padDate(date.getDate());
          var hours = padDate(date.getHours());
          var minutes = padDate(date.getMinutes());
          var seconds = padDate(date.getSeconds());
          //整理好的数据返回出去
          return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
        }
      },
      mounted:function(){
        var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(function(){
          _this.date = new Date();
        },1000);
      },
      beforeDestory:function(){
        if(this.timer){
          clearInterval(this.timer);//在vue示例销毁前，清除我们的定时器
        }
      }
    })
  </script>
</body>
</html>

Elylicery

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue实例：实时显示当前的时间

效果图思路使用 new Date()获取当前时间，利用setInterval每秒更新一次数据使用过滤器格式化时间的文本显示代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫