vue filters 日期

 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>