<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue</title>

     </head>

     <body>

         <div id="app">

             {{date}}

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var app = new Vue({

                 el:'#app',

                 data:{

                     date: new Date()

                 },

                 mounted () {

                     var _this = this; //声明一个变量指向vue实例this,保证作用域一致

                     this.timer = setInterval(function() {

                         _this.date = new Date();//修改数据date

                     }, 1000);

                 },

                 beforeDestroy () {

                     if(this.timer) {

                         clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器

                     }

                 }

             });

         </script>

     </body>

 </html>

vue 2.1.3 实时显示当前时间，每秒更新的更多相关文章

  1. Vue页面上实时显示当前时间，每秒更新

    有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...

  2. vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式

    在实际运用中时间格式"yyyy-MM-dd hh:mm:ss"用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码: 引入相应的js即可运行 <!DOCTYPE ht ...

  3. JavaScript实时显示当前时间的例子

    用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...

  4. Qt 实时显示系统时间

    前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...

  5. Android学习总结——实时显示系统时间

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

  6. JavaScript实时显示当前时间

    1.HTML部分 <div id="div1">显示当前时间!</div> 2.css部分 #div1 { width: 700px; height: 50 ...

  7. js实时显示系统时间

    刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...

  8. 用JS实现实时显示系统时间

    废话我就不多说了,直接上图和代码了 效果图: 代码视图: 下面为大家附上代码,复制即可用: <!DOCTYPE html> <html lang="en"> ...

  9. Javascript 客户端实时显示服务器时间

    <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. 2019牛客多校第七场H Pair 数位DP

    题意:给你一个3个数A, B, C问有多少对pair(i, j),1 <= i <= A, 1 <= j <= B, i AND j > C或 i XOR j < ...

  2. STL sort源码剖析

    转载自:http://www.cnblogs.com/imAkaka/articles/2407877.html STL的sort()算法,数据量大时采用Quick Sort,分段递归排序,一旦分段后 ...

  3. EventBus总结（原）

    1.EventBus的作用 EventBus is a publish/subscribe event bus for Android and Java. EventBus可以被用来在各种自定义的监听 ...

  4. paint进阶（转）

    转自:https://blog.csdn.net/cquwentao/article/details/51374994 概述 paint的基本绘制方法已经在前面的基本图形绘制中讲解了,这里做的是进阶讲 ...

  5. bootstrap.yml

    spring: jpa: properties: hibernate.enable_lazy_load_no_trans: true application: name: paycore cloud: ...

  6. POJ 3414 Pots （dfs，这个代码好长啊QAQ）

    Description You are given two pots, having the volume of A and B liters respectively. The following ...

  7. springboot-redis相关配置整理

    1.pom.xml引入对应数据文件 <dependency> <groupId>org.springframework.boot</groupId> <art ...

  8. MySQL 小数处理函数 round 和 floor

    一. 在mysql中,round函数用于数据的四舍五入,它有两种形式: 1.round(x,d)  ,x指要处理的数,d是指保留几位小数 这里有个值得注意的地方是,d可以是负数,这时是指定小数点左边的 ...

  9. 深入理解finally关键字,Finally到底是在return前面执行还是在return后面执行

    一:2种finally不会执行的情况 a.在try语句之前就return了 b.try语句中有System.exit();语句 二:finally语句在return执行之后,return返回之前执行 ...

  10. Rust <6>：闭包

    单线程环境: 从宿主环境中捕获的变量,是引用,会改变原有的值,与 golang 的闭包行为一样: 以参数形式传入的变量,默认会发生 move:而 golang 的闭包参数,是宿主环境的副本,相当于在 ...