编程 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 相关文章推荐

encode脚本和normal脚本混用的问题与解决方法

Mar 08 Javascript

如何通过javascript操作web控件的自定义属性

Nov 25 Javascript

jQuery实现级联菜单效果(仿淘宝首页菜单动画)

Apr 10 Javascript

js去除输入框中所有的空格和禁止输入空格的方法

Jun 09 Javascript

JavaScript中exec函数用法实例分析

Jun 08 Javascript

JQuery鼠标移到小图显示大图效果的方法

Jun 10 Javascript

需要牢记的JavaScript基础知识

Sep 25 Javascript

BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

Dec 28 Javascript

微信小程序 scroll-view实现锚点滑动的示例

Dec 06 Javascript

vue.js做一个简单的编辑菜谱功能

May 08 Javascript

基于D3.js实现时钟效果

Jul 17 Javascript

vue开发简单上传图片功能

Jun 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