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基础资料整理2
Dec 06 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
轻松搞定js表单验证
Oct 13 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 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
php4的session功能评述(二)
2006/10/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
基于python实现地址和经纬度转换
2020/05/19 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
RealTek面试题
2016/06/28 面试题
编辑求职信样本
2013/12/16 职场文书
企业法人授权委托书
2014/09/25 职场文书
2014年教师工作总结
2014/11/10 职场文书