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

来源：懂视网责编：小采时间：2020-11-27 22:07:38

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

vue 2.1.3 实时显示当前时间,每秒更新的方法:如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Vue</title> </head> <body> <div id=app> {{date}} </

推荐度：

点击下载本文 文档为doc格式

导读vue 2.1.3 实时显示当前时间,每秒更新的方法:如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Vue</title> </head> <body> <div id=app> {{date}} </

如下所示：

<!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>