如图展示了周几、日期、时间(实时变化)。可以根据自己想要的格式调整
在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,
}