如图展示了周几、日期、时间(实时变化)。可以根据自己想要的格式调整

 在div中:

<div>{{nowWeek}}</div>
<div>{{ nowTime}}</div>     
<div>{{ nowDate}}</div>

 在return中:

return {

                nowDate: nowDateref,
                nowTime: nowTimeref,
                nowWeek: nowWeekref,

}

定义初始值:

const nowDateref = ref("")
const nowTimeref = ref("")
const nowWeekref = ref("") 

引入onMounted和ref

import {
        ref,
        onMounted,
} from 'vue' 

 在onMounted中调用方法:

onMounted(() => {
                setInterval(getDate1, 500);

 })

定义方法:

function getDate1() {
				var _this = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				let week = new Date().getDay();
				let hh = new Date().getHours();
				let ms =
					new Date().getSeconds() < 10 ?
					"0" + new Date().getSeconds() :
					new Date().getSeconds();
				let mf =
					new Date().getMinutes() < 10 ?
					"0" + new Date().getMinutes() :
					new Date().getMinutes();
				if (week == 1) {
					nowWeekref.value = "周一";
				} else if (week == 2) {
					nowWeekref.value = "周二";
				} else if (week == 3) {
					nowWeekref.value = "周三";
				} else if (week == 4) {
					nowWeekref.value = "周四";
				} else if (week == 5) {
					nowWeekref.value = "周五";
				} else if (week == 6) {
					nowWeekref.value = "周六";
				} else {
					nowWeekref.value = "周日";
				}
				// nowTimeref.value = hh + ":" + mf + ":" + ms;
                //ms是秒,这里可以根据自己需要调整格式
				nowTimeref.value = hh + ":" + mf;
				// nowDateref.value = yy + "年" + mm + "月" + dd + "日";
				nowDateref.value = yy + "-" + mm + "-" + dd;
			}

最后别忘了在return中定义一下函数名:

return {

                nowDate: nowDateref,
                nowTime: nowTimeref,
                nowWeek: nowWeekref,

                getDate1,

}

Logo

前往低代码交流专区

更多推荐