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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
document.forms用法示例介绍
Jun 26 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
javascript cookies操作集合
2010/04/12 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python 多线程应用介绍
2012/12/19 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python入门教程之基本算术运算符
2020/11/13 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
python高温预警数据获取实例
2022/07/23 Python