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 相关文章推荐
jQuery hover 延时器实现代码
Mar 12 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
4个顶级开源JavaScript图表库
Sep 29 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
用pycharm开发django项目示例代码
2019/06/13 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
LINUX下线程,GDI类的解释
2016/12/14 面试题
教育学习自我评价
2014/02/03 职场文书
市场营销战略计划书
2014/05/06 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
追悼会悼词大全
2015/06/23 职场文书
人代会简报
2015/07/21 职场文书