vue 2.1.3 实时显示当前时间,每秒更新的方法


Posted in Javascript onSeptember 16, 2018

如下所示:

<!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 实时显示当前时间,每秒更新的方法

以上这篇vue 2.1.3 实时显示当前时间,每秒更新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js切换光标示例代码
Oct 10 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
vue debug 二种方法
Sep 16 #Javascript
Vue刷新修改页面中数据的方法
Sep 16 #Javascript
Vue中使用vux配置代码详解
Sep 16 #Javascript
在vue中安装使用vux的教程详解
Sep 16 #Javascript
React 组件中的 bind(this)示例代码
Sep 16 #Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 #Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python远程登录代码
2008/04/29 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Mac安装python3的方法步骤
2019/08/09 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
出国导师推荐信
2015/03/25 职场文书
获奖感言一句话
2015/07/31 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android