반응형
<script setup>
const startTime = ref(new Date());
const diff = ref();
const elapsedTime = ref();
onMounted(() => {
// countdown 5분 설정
startTime.value = startTime.value.setMinutes(startTime.value.getMinutes() + 5);
updateElapsedTime();
setInterval(updateElapsedTime, 1000);
});
function updateElapsedTime() {
const currentTime = new Date();
diff.value = startTime.value - currentTime;
// set diff elapsed time in HH:MM:SS format
const min = Math.floor(diff.value % (1000 * 60 * 60) / (1000 * 60));
const sec = Math.floor(diff.value % (1000 * 60) / 1000);
elapsedTime.value = `${min}:${sec}`;
}
</script>
<div> {{ elapsedTime }} </div>
반응형
'개발 > vue' 카테고리의 다른 글
Vue 3에서 컴포넌트 간 데이터 변동을 감지하고 관리하는 주요 방법들 (0) | 2024.11.15 |
---|---|
Vue 3.0에서 타입스크립트 사용하기 (0) | 2023.10.11 |
[Vue] Component 재사용 (0) | 2023.01.17 |