vue 实现动态时间

vue 实现动态时间

首先看html:

<div class="timeSpan">
 {{nowTime || '加载中....'}}
</div>

vue js：

return {
	nowTime: null, // 当前时间
}
mounted(){
    this.$nextTick(() => { // 动态时间展示
    	setInterval(this.showTime, 1000);
    });
  },
methods: {
	showTime() { // 动态展示现在时间
	   var date = new Date();
	   var year = date.getFullYear();
	   var month = date.getMonth() + 1;
	   month = month < 10 ? "0" + month : month;
	   var day = date.getDate();
	   day = day < 10 ? "0" + day : day;
	   var week = "日一二三四五六".charAt(date.getDay()); // 使用charAt函数提取相应汉字
	   var hour = date.getHours();
	   hour = hour < 10 ? "0" + hour : hour; // 用三目运算符调整数字显示格式
	   var minute = date.getMinutes();
	   minute = minute < 10 ? "0" + minute : minute;
	   var second = date.getSeconds();
	   second = second < 10 ? "0" + second : second;
	   // 加载现在时间
	   var current = year + "-" + month + "-" + day + " " + "星期" + week + " " + hour + ":" + minute + ":" + second;
	   this.nowTime = current;
	 },
}

样式调整：

.timeSpan{
    text-align: end;
    float: right;
    font-weight: bold;
    color: #0d233c;
    padding-bottom: 10px;
  }