sd敢达加速精灵下载,黄致列假图吹嘘,辽同聊天室
本文实例讲述了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>
<!-- vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--# vue.js支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤，经常用于格式化文本，比如字母全部大写，货币千位使用逗号分隔等。过滤的规则是自定义的，通过给vue实例添加选项filters来设置，例如对显示时间的格式化处理 #-->
{{ 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>
使用本站html/css/js在线运行测试工具：，可得到如下测试运行效果：
ps：这里再为大家推荐几款时间及日期相关工具供大家参考使用：
在线日期/天数计算器：
在线日期计算器/相差天数计算器：
在线日期天数差计算器：
unix时间戳(timestamp)转换工具：
希望本文所述对大家vue.js程序设计有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论