Vue中如何动态显示时间?
1:先上效果图:2:注意点:(1)created( ) 与 mounted( )的区别就是:created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。(2)setInterval()的使用setInterval() 方法会不停地调用函数,直到 clearInter
·
1:先上效果图:
2:注意点:
(1)created( ) 与 mounted( )的区别就是:
created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
(2)setInterval()的使用
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
3:在组件中
今天的日期是:{{ FormatTime(nowTime) }}
4:script中代码段
data() {
return {
timer: undefined,
nowTime: new Date(),
latedata:"2020-1-9",
}
},
created() {
// 显示时间,在渲染页面之前一直调用该函数,对this.time进行赋值
this.timer = setInterval(() => {
this.nowTime= new Date().toLocaleString();
});
},
// 销毁定时器
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
FormatTime() {
//返回显示的日期时间格式
var date = new Date();
var year = this.formatTime(date.getFullYear());
var month = this.formatTime(date.getMonth() + 1);
var day = this.formatTime(date.getDate());
var hour = this.formatTime(date.getHours());
var minute = this.formatTime(date.getMinutes());
var second = this.formatTime(date.getSeconds());
var weekday = date.getDay();
var weeks = new Array(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
);
var week = weeks[weekday];
return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
},
formatTime(n) {
//判断是否需要加0
if (n < 10) {
return "0" + n;
} else {
return n;
}
},
}
formatTime(n)函数是为了对获取的每个demo进行格式转变,可有可无
更多推荐
已为社区贡献4条内容
所有评论(0)