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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 2.1.3 实时显示当前时间,每秒更新的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含741字，纯文字阅读大概需要2分钟。

内容图文

如下所示：

<!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 实时显示当前时间,每秒更新的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vue 2.1.3 实时显示当前时间,每秒更新的方法全部内容，希望文章能够帮你解决vue 2.1.3 实时显示当前时间,每秒更新的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/335133.html

来源：【匿名】