【转载】vue.js实现格式化时间并每秒更新显示功能示例

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

引用：https://www.jb51.net/article/143351.htm

这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于定时器进行实时更新的相关操作技巧,需要的朋友可以参考下

本文实例讲述了vue.js实现格式化时间并每秒更新显示功能。分享给大家供大家参考，具体如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>www.jb51.net vue格式化时间</title>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">

{{ date | formatDate }}
</div>
</body>
</html>
<script>
var myData = {
date:new Date()
};
//在月份、日期、小时等小于10前面补0
var padDate = function (value) {
return value <10 ? '0' + value:value;
};
var app = new Vue({
el:'#app',
data:myData,
filters: {
formatDate:function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth()+1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
}
},
//实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用
created:function () {
},
//el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
mounted:function () {
var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
this.timer = setInterval(function(){
_this.date = new Date(); //修改数据date
},1000)
},
//实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
}
}
})
</script>