编程 Javascript

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 实时显示当前时间,每秒更新的方法

- Author -

铜镜123

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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