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) {//判断是否需要加0if (n < 10) {return "0" + n;} else {return n;}},}