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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
解析vue中的$mount
Dec 21 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
python决策树之C4.5算法详解
2017/12/20 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
聊聊Python中的pypy
2018/01/12 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
汽车维修求职信
2014/06/15 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
草房子读书笔记
2015/06/29 职场文书
医院保洁员管理制度
2015/08/05 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python