<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示当前时间</title> </head> <body> <div id="app"> {{date | formatDate}} </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> // 在月份、日期、小时等小于10时前补0 var padDate = function(value){ return value < 10 ? '0'+ value : value; }; var app = new Vue({ el:'#app', data:{ date: new Date() }, filters:{ formatDate:function(value){// 这里的value就是需要过滤的数据 var date = new Date(value); var year = date.getFullYear(); var month = padDate(date.getMonth()+1); var day = padDate(date.getDate()); var hours = padDate(date.getHours()); var minutes = padDate(date.getMinutes()); var seconds = padDate(date.getSeconds()); // 将整理好的数据返回出去 return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds; } }, mounted:function(){ var _this = this;//声明一个变量指向Vue实例this，保证作用域一致 this.timer = setInterval(function(){ _this.date = new Date();// 修改数据date },1000); }, beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer);// 在Vue实例销毁前，清除我的的定时器 } } }) </script> </body> </html>