vue 2.1.3 实时显示当前时间,每秒更新的方法

更新时间：2018年09月16日 09:40:31 作者：铜镜123

今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<!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利用vue meta info设置每个页面的title与meta信息
这篇文章主要给大家介绍了关于vue如何利用vue meta info设置每个页面的title与meta信息的相关资料,文中将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2021-10-10
Vue循环组件加validate多表单验证的实例
今天小编就为大家分享一篇Vue循环组件加validate多表单验证的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue路由对象属性 .meta $route.matched详解
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue操作动画的记录animate.css实例代码
这篇文章主要介绍了vue操作动画的记录animate.css的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue之nextTick全面解析
本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
vue中使用elementUI自定义校验及点击提交不生效问题解决办法
我们在项目中经常会用到ElementUI的表单验证,下面这篇文章主要给大家介绍了关于vue中使用elementUI自定义校验及点击提交不生效问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
基于vue实现微博三方登录流程解析
这篇文章主要介绍了基于vue实现微博三方登录流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法
今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0，感兴趣的朋友一起看看吧
2022-06-06
教你搭建按需加载的Vue组件库(小结)
这篇文章主要介绍了教你搭建按需加载的Vue组件库(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
使用vue实现滑动滚动条来加载数据
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下
2023-10-10