页面上的时间不是动态显示的,而是每刷新一次更新一次,怎么让它实时动态显示啊!应该怎么改
<script>
import {
ref,
reactive,
watchEffect
}
from 'vue';
export default {
setup() {
const datetime = reactive({ nowTime: '' });
const popoverCode = ref('');
const visible = ref(false);
const isOnline = ref(true);
const change = () => {
// 修改按钮
};
const cancel = () => {
// 删除按钮
};
const updateNetworkStatus = () => {
isOnline.value = navigator.onLine;
};
const getTime = () => {
const myDate = new Date();
const myYear = myDate.getFullYear();
const myMonth = myDate.getMonth() + 1;
const myToday = myDate.getDate();
const myHour = myDate.getHours();
const myMinute = myDate.getMinutes();
const mySecond = myDate.getSeconds();
datetime.nowTime = `${myYear}年${fillZero(myMonth)}月${fillZero(myToday)}日 ${fillZero(myHour)}:${fillZero(myMinute)}:${fillZero(mySecond)}`;
};
const fillZero = (str) => {
let realNum;
if (str < 10) {
realNum = '0' + str;
} else {
realNum = str;
}
return realNum;
};
watchEffect(() => {
getTime();
});
// 监听在线状态
window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);
return {
datetime,
popoverCode,
visible,
isOnline,
change,
cancel
};
}
};
写一个定时器 每一秒赋值一次就好了
【相关推荐】
这一点在官方文档可以看到。
vue3使用一个虚拟节点作为组件的根节点,所以允许我们在书写代码的过程中在template中使用多个节点,但是会与内置组件transition发生冲突,需要注意。