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 attachEvent传递参数的办法
Dec 14 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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数组函数
2008/08/18 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
js的各种数据类型判断的介绍
2019/01/19 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
在Python中使用dict和set方法的教程
2015/04/27 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
一组SQL面试题
2016/02/15 面试题
酒店副总岗位职责
2013/12/24 职场文书
学期评语大全
2014/04/30 职场文书
禁毒宣传标语
2014/06/19 职场文书
大型公益活动策划方案
2014/08/20 职场文书
公司更名通知函
2015/04/24 职场文书