html js设置刷新间隔,vue.js实现格式化时间并每秒更新显示功能示例

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

发布时间：2020-08-30 11:36:10

来源：脚本之家

阅读：146

作者：_code小学生

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

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

www.jb51.net vue格式化时间

{{ date | formatDate }}

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实例销毁前，清除我们的定时器

}

}

})

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器：http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器：http://tools.jb51.net/jisuanqi/datecalc

在线日期天数差计算器：http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具：http://tools.jb51.net/code/unixtime

希望本文所述对大家vue.js程序设计有所帮助。