Vue实时显示时间

素颜马尾好姑娘i 2023-10-18 08:48 17阅读 0赞

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue 实时显示时间</title>
     </head>
     <body>
      <div id="app">
        {
       {date}}
      </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     var app = new Vue({
         el:'#app',
         data:{
             date:new Date()
         },
         //mounted是在el挂载到实例上后调用，一般第一个业务逻辑会在这里开启
         mounted:function(){
            var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function(){   
            //设置定时器，每秒执行一次function函数，
            //函数是获取当前时间并给date变量赋值(每秒赋值一次)
                _this.date = new Date();  //修改数据date
            },1000);
         },
         beforeDestroy:function(){
            if(this.timer){
                clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
            }
         }
     })
    </script>
     </body>
    </html>

![70][]

[70]: https://img-blog.csdn.net/20180913110920350?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过滤器的简单使用--实时显示格式化的时间

Vue的过滤器的使用是在\{ \{\}\}插值的尾部添加一个管道符 | 过滤的规则是自己定义的，通过给Vue实例添加选项filters来设置通过过滤器对时间进行格式化从而

古城微笑少年丶/ 2023年10月18日 08:48/ 0 赞/ 13 阅读

相关 Vue实时显示时间

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

素颜马尾好姑娘i/ 2023年10月18日 08:48/ 0 赞/ 18 阅读

相关 ASP.NET网站中显示实时时间

ASP.NET网站中显示实时时间标签： [ asp.net][asp.net][ajax][][timer][][server][][asp][][xhtml][] 2

谁践踏了优雅/ 2022年07月15日 11:25/ 0 赞/ 262 阅读

相关 android 实时显示系统时间

我们知道，用System.currentTimeMillis()可以获取系统当前的时间，我们可以开启一个线程，然后通过handler发消息，来实时的更新TextView上显示的

迈不过友情╰/ 2022年07月15日 03:10/ 0 赞/ 285 阅读

相关 web显示实时时间动态刷新

代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

约定不等于承诺〃/ 2022年06月09日 12:07/ 0 赞/ 371 阅读

相关实时显示时间（HTML+JS）

原文地址：[http://blog.csdn.net/qq\_35952946/article/details/56012654][http_blog.csdn.net_qq

男娘i/ 2022年05月30日 11:11/ 0 赞/ 378 阅读

相关 Android——实时显示系统时间

System.currentTimeMillis()可以获取系统当前的时间，这里要实时显示就可以开启一个线程，然后通过handler发消息，来实时的更新TextView

ゝ一纸荒年。/ 2022年05月23日 09:06/ 0 赞/ 804 阅读

相关 js获取并在页面显示实时时间

js获取并在页面显示实时时间 <!DOCTYPE html> <html lang="en"> <head> <meta charset

约定不等于承诺〃/ 2021年09月18日 15:56/ 0 赞/ 452 阅读

相关 Vue中使用dayjs转换时间格式并实时显示当前时间

【此外，moment也可以实现类似的功能，见：[https://blog.csdn.net/qq\_40323256/article/details/116421736][ht

小灰灰/ 2021年09月03日 10:27/ 0 赞/ 1402 阅读

相关 vue实时显示当前时间和天气

推荐更简单的方式（使用dayjs）：[https://blog.csdn.net/qq\_40323256/article/details/110930383][https_b

左手的ㄟ右手/ 2021年08月19日 19:36/ 0 赞/ 1565 阅读