在实际运用中时间格式“yyyy-MM-dd hh:mm:ss”用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码:
引入相应的js即可运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实时显示当前时间显示</title> <link rel="stylesheet" href="../css/reset.css"> <script src="../js/jquery/jquery-3.1.1.min.js"></script> <script src="../js/vue/vue.js"></script> </head> <body > <div id="app">当前实时时间:{{dateFormat(date)}}</div> <script> var vm=new Vue({ el:"#app", data:{ date:new Date() }, mounted () { var _this = this; //声明一个变量指向vue实例this,保证作用域一致 this.timer = setInterval(function() { _this.date = new Date();//修改数据date }, 1000); }, beforeDestroy () { if(this.timer) { clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器 } }, methods:{ //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化 dateFormat(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中，月份是从0开始的，因此要加0 * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05 * */ var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1; var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate(); var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours(); var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes(); var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds(); // 拼接 return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds; } } }) </script> </body> </html>
效果如下:
