您的当前位置:首页正文

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

2020-11-27 来源:爱站旅游

如下所示:

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

显示全文