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 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
vue.js封装switch开关组件的操作
Oct 26 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 编程的 5个良好习惯
2009/02/20 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python之str操作方法(详解)
2017/06/19 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
详解python对象之间的交互
2020/09/29 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
保安员岗位职责
2013/11/17 职场文书
销售主管竞聘书
2014/03/31 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android