diff --git a/03-components/20-UiClock/UiClock.js b/03-components/20-UiClock/UiClock.js index 8215f32..9d575a8 100644 --- a/03-components/20-UiClock/UiClock.js +++ b/03-components/20-UiClock/UiClock.js @@ -1,9 +1,33 @@ -import { defineComponent } from 'vue' +import { defineComponent, onMounted, onUnmounted, ref } from 'vue' export default defineComponent({ name: 'UiClock', - setup() {}, + setup() { + const currentTime = ref('') - template: `
10:12:02
`, + const updateCurrentTimeValue = () => { + const date = new Date() + currentTime.value = date.toLocaleTimeString(navigator, { + timeStyle: 'medium', + }) + } + + onMounted(() => { + updateCurrentTimeValue() + setInterval(updateCurrentTimeValue, 1000) + + onUnmounted(() => { + clearInterval(updateCurrentTimeValue) + }) + }) + + return { + currentTime, + } + }, + + template: `
+ {{ currentTime }} +
`, })