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

 在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,

}

GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 2 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐