<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app" >
{{ date | formatDate }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var padDate = function(value){
return value < 10 ? '0' + value :value;
}
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
filters: {
formatDate: function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDay());
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; // 指向this 變量作用域一致;
this.timer = setInterval(function() {
_this.date = new Date(); // 修改date
},1000);
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
}
// created: function () {
// console.log(this.a);
// },
// mounted: function () {
// var _this = this; //聲明一個變量指向 Vue 實例 this，保證作用域一致
// this.timer = setInterval (function () {
// this.date = new Date();
// console.log(this.date);// 修改date
// },1000);
// },
// beforeDestory: function () {
// if (this.timer) {
// clearInterval(this.timer); //在 Vue 實例銷毀前，清除我們的定時器
// }
// }
})
</script>
</body>
</html>
