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 实时显示当前时间，每秒更新

最新文章

热门文章