Simple Vue components - local time

smk762 (27)in #javascript • 6 years ago

Create a div for Vue to link to and surround the dynamic render variable text in a pair of mustaches

<div id="time">{{ text }}</div>

Create a Date object, and a Vue instance. Link it to the time div, and set the initial value to the local current time.

<script>
var d = new Date();
var clock = new Vue({
el: '#time',
data: {
text: d.toLocaleTimeString()
}
})

Create an interval timing event to recalculate the current time every 1000 milliseconds.
setInterval( function() { d = new Date(); clock.text = d.toLocaleTimeString() },1000);
</script>

Assigning the calculated time to the data property text of the Vue instance clockmeans each time the setInterval event runs, the time element updates the value displayed.

#vuejs #webdev