<template> <div class="mydate"> {{date|formatDate(this)}} </div> </template> <script> export default{ data(){ return{ date:new Date( <template> <div class="mydate"> {{date|formatDate(this)}} </div> </template> <script> export default{ data(){ return{ date:new Date() } }, methods:{ padDate(value){ return value<10?"0"+value:value }, }, filters:{ formatDate(value,vue){//value需要過濾的數據 var date = new Date(value); var year = date.getFullYear(); var month = vue.padDate(date.getMonth()+1); var day = vue.padDate(date.getDate()); var hours = vue.padDate(date.getHours()); var minutes = vue.padDate(date.getMinutes()); var seconds = vue.padDate(date.getSeconds()); return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds; } }, mounted(){ this.timer = setInterval(()=>{ this.date = new Date(); },1000); }, beforeDestory(){ if(this.timer){ clearInterval(this.timer);//在vue實例銷毀前,清除我們的定時器 } } } </script> </script> <style> </style> ) } }, methods:{ padDate(value){ return value<10?"0"+value:value }, }, filters:{//filters指向window而不是vue,所以要將vue作為參數傳進來才能調用methods中的方法 formatDate(value,vue){//value需要過濾的數據 var date = new Date(value); var year = date.getFullYear(); var month = vue.padDate(date.getMonth()+1); var day = vue.padDate(date.getDate()); var hours = vue.padDate(date.getHours()); var minutes = vue.padDate(date.getMinutes()); var seconds = vue.padDate(date.getSeconds()); return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds; } }, mounted(){ this.timer = setInterval(()=>{ this.date = new Date(); },1000); }, beforeDestory(){ if(this.timer){ clearInterval(this.timer);//在vue實例銷毀前,清除我們的定時器 } } } </script> </script> <style> </style>