1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue filters</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{ date | formDate }} 10 </div> 11 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 13 <script type="text/javascript"> 14 15 var padDate = function(value) { 16 return value < 10 ? '0' + value : value; 17 }; 18 19 var app=new Vue({ 20 el:'#app', 21 data:{ 22 date: new Date() 23 }, 24 filters: { 25 formDate: function(value) {//value即为需要过滤的数据 26 var date = new Date(value); 27 var year = date.getFullYear(); 28 var month = padDate(date.getMonth() + 1); 29 var day = padDate(date.getDate()); 30 var hours = padDate(date.getHours()); 31 var minutes = padDate(date.getMinutes()); 32 var secondes = padDate(date.getSeconds()); 33 //返回整理好的数据 34 return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + secondes; 35 } 36 }, 37 mounted: function() { 38 var _this = this;//声明一个变量指向Vue实例this,保证作用域一致 39 this.timer = setInterval(function() { 40 _this.date = new Date();//修改数据date 41 }, 1000) 42 }, 43 beforeDestroy: function() { 44 if(this.timer) { 45 clearInterval(this.timer);//在Vue实例销毁前，清除定时器 46 } 47 } 48 }) 49 50 </script> 51 </body> 52 </html>
