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 编程引入命名空间的方法
Jun 29 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue实现侧边栏导航效果
Oct 21 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
用Socket发送电子邮件
2006/10/09 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
Javascript----文件操作
2007/01/18 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python连接mysql实例分享
2016/10/09 Python
Django自定义manage命令实例代码
2018/02/11 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python用户自定义异常的实现
2020/12/25 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
写给女生的道歉信
2014/01/08 职场文书
七一表彰活动方案
2014/01/18 职场文书
优秀学生获奖感言
2014/02/15 职场文书
实验心得体会
2014/09/05 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server