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>
