下面是Vue 3风格的代码：

<template>
   <h1>Hello World {{ time }}</h1>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    var time = ref()
    setInterval(() => {
      time.value = new Date().toString('hh:mm:ss tt')
    }, 1000)

    return { time }
  }
}
</script>

虽然可以使用document.getElementById，但也可以使用refs完成，如下所示：

new Vue({
  el:"#app",
  mounted() {
    var timeInterval = setInterval(this.time, 1000);
  },
  methods: {
    time: function() {
      this.$refs.time.innerHTML = new Date().toString("hh:mm:ss tt");
    }
  }
});

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

<div id="app">
  <div ref="time"></div>
</div>

或者通过更新data属性，如下所示：

new Vue({
  el:"#app",
  data() { return { time: "" } },
  mounted() { 
    var timeInterval = setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime: function() {
      this.time = new Date().toString("hh:mm:ss tt");
    }
  }
});

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

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

你可以在Vue Js中创建一个数字时钟，使用setInterval（）方法定期真实的更改其值。请参见下面的示例：

const {ref, createApp} = Vue

createApp({
    setup() {
        //define variable date using reactivity API
        const date = ref(new Date())
        //change date value periodically using setInterval() method
        setInterval(() => {
            date.value = new Date()
        }, 1000)

        return {
            date
        }
    }
}).mount('#app')

<script src="https://unpkg.com/vue@3.1.1/dist/vue.global.prod.js"></script>

<div id="app">
<!-- display a digital clock with the format hour:minute:second to the browser -->
      <h3> {{date.getHours()}}:{{date.getMinutes()}}:{{date.getSeconds()}}</h3>
</div>

浏览器中的结果如下所示：**21：31：05