Simple Clock with Vue.js

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<center>
The current time is:
<div id="clock"><h1>{{ time }}<h1></div>
  </center>

script.js

Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
}
function formatTime(dateObj) {
  return dateObj.getHours().pad() + ":" + dateObj.getMinutes().pad() + ":" + dateObj.getSeconds().pad()
}
const vm = new Vue({
  el: "#clock",
  data: {
    time: formatTime(new Date())
  }
})
setInterval(() => {
  vm.time = formatTime(new Date())
}, 500)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>

simple-clock-with-vue-js.markdown

Simple Clock with Vue.js

A Pen by chanonlim on CodePen.

License.

style.css

body {
  font-family: "Segoe UI"
}