<!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. Django Rest框架 APIView源码调用

    上一篇说了请求访问的流程,这一篇说一下请求对应的源码调用 as_view 定义view dispatch dispatch initialize_request get_parsers         ...

  2. bootstrap.yml

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

  3. jQuery遍历之向上遍历

    1.parent $(document).ready(function(){ $("a").parent().css({border:"4px solid black&q ...

  4. Cesium截图功能

    首先安装  canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...

  5. AI加持的阿里云飞天大数据平台技术揭秘

    摘要:2019云栖大会大数据&AI专场,阿里云智能计算平台事业部研究员关涛.资深专家徐晟来为我们分享<AI加持的阿里云飞天大数据平台技术揭秘>.本文主要讲了三大部分,一是原创技术优 ...

  6. nodejs在Windows 7上的搭建

    一.安装nodejs 去官网下载https://nodejs.org/download/,我选择下载node-v9.3.0-x64.msi ,最新版本, 安装路径放在了D盘,因为C盘的空间不够了,直接 ...

  7. Android学习--写一个发送短信的apk，注意布局文件的处理过程！！！

    刚开始写Android程序如图发现使用了findViewById方法之后输出的话居然是null(空指针错误),也就是说这个方法没有成功.网上说这样写是在activity_main .xml去找这个ID ...

  8. idea使用 xml文件

    如图 搜索template(模板) 点击加号后

  9. python模块学习之HTMLTestRunner模块生成HTML测试报告

    #!/usr/bin/env python #-*- coding:utf-8 -*- from HTMLTestRunner import HTMLTestRunner import time im ...

  10. SpringMVC（IntelliJ IDEA）（详细操作）

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.