<!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. numpy 数组中添加新元素

    import numpy as npnew_array = np.empty(shape=[0, 3]) # 3列n行for i in range(10): x = i+1 y = i+2 z = i ...

  2. springboot themaleaf 各种报错

    1.访问themaleaf页面报错 Whitelabel Error Page This application has no explicit mapping for /error, so you ...

  3. Android开发文档

    https://developer.android.com/ 用ke学上网方能打开

  4. HashMap常见面试题

    1.HashMap底层是通过什么来实现的? 在JDK1.7中是通过数组+链表来实现的: 在JDK1.8中是通过数组+链表+红黑树来实现的 2.HashMap在JDK1.8中为什么使用红黑树? 为了弥补 ...

  5. c#处理3种json数据的方式

    原文出处:http://www.jb51.net/article/48027.htm 一.C#处理简单json数据 json数据: {"result":"0", ...

  6. php abs()函数 语法

    php abs()函数 语法 abs()函数怎么用? abs()函数的作用是返回一个数的绝对值.语法是abs(number),如果参数 number 是 float,则返回的类型也是 float,否则 ...

  7. vue基础六

    列表渲染 1.v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法(也可以用of代替in), items是源数据数组 ...

  8. 绝不划水队Alpha冲刺阶段博客目录

    绝不划水队Alpha冲刺阶段博客目录 一.Scrum Meeting 第六周会议记录 第七周会议记录 二.测试报告 alpha阶段测试报告 三.习得的软工原理/方法/技能? 李浩杰: (1)一开始分工 ...

  9. WebRequest发送请求并接收返回值

    public string getXmlStr(string hphmcode)         {            string Url = "http://localhost:80 ...

  10. WebBrowser是IE内置的浏览器控件

    WebBrowser是IE内置的浏览器控件.WebBrowser是IE内置的浏览器控件.WebBrowser是IE内置的浏览器控件.重要的事情说三遍,原因是一开始使用的时候就在这踩了坑. WebBro ...