<!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. 十二、结构模式之门面（Facade）模式

    什么是门面模式 门面模式(也有翻译为外观模式)是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面进行.其为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子 ...

  2. MYSQL如何优化？

    MYSQL如何优化?结合你的经验 1.数据库的设计尽量把数据库设计的更小的占磁盘空间.1).尽可能使用更小的整数类型.(mediumint就比int更合适).2).尽可能的定义字段为not null, ...

  3. PHP实现笛卡尔积算法

    概念 在数学中,两个集合X和Y的笛卡儿积(Cartesian product),又称直积,表示为 X × Y.设A.B是任意两个集合,在集合A中任意取一个元素x,在集合B中任意取一个元素y,组成一个有 ...

  4. Python中的try-finally

    >>> try: ... raise KeyboardInterrupt ... finally: ... print('Goodbye, world!') ... Goodbye, ...

  5. openwrt 编译支持sqlite3

    编译版本加载lib库 ------------------------------Libraries----------------------------------- Filesystem  -- ...

  6. boost smart pointer

    1. boost::scoped_ptr is a smart pointer that is the sole owner of a dynamically allocated object and ...

  7. mysql完美增量备份脚本

    是否因为mysql太大,来回备份浪费资源带宽而发愁,如果想解决这个麻烦就需要增量备份. vi /etc/my.cnf开启日志及定期清理日志log-bin=mysql-binbinlog_format= ...

  8. 【C#技术】一篇文章搞掂：Infragistics组件库

    工具栏 // 按钮不可按 tool.SharedProps.Enabled = false; Grid // Grid中记录时间 // 建议SQL Server中使用字符字段(没有深入测试,只是字符字 ...

  9. hdu6578 2019湖南省赛D题Modulo Nine 经典dp

    目录 题目 解析 AC_Code @ 题目 第一题题意是一共有{0,1,2,3}四种数字供选择,问有多少个长度为n的序列满足所有m个条件,每个条件是说区间[L,R]内必须有恰好x个不同的数字. 第二题 ...

  10. react 中使用 JsBarcode 显示条形码

    import React from 'react';import JsBarcode from 'jsbarcode'; export class RefundSheet extends React. ...