Javascript Vue.JS上的时间自动刷新

我打算在Vue上显示此时钟。此时钟自动刷新时间，但如何转换此代码

有没有一种简单的方法可以将其转换为Vue？Vue没有（

document.getElementBy

…）

功能时间（）{
document.getElementById（“time”）.innerHTML=new Date（）.toString（“hh:mm:ss tt”）；
}
var timeInterval=setInterval（时间，1000）；//每1000毫秒调用一次函数

尽管您可以使用

document.getElementById

，但也可以使用

参考文件来完成，如下所示：


newvue({
el:“应用程序”，
安装的（）{
var timeInterval=setInterval（this.time，1000）；
},
方法：{
时间：函数（）{
此.$refs.time.innerHTML=new Date（）.toString（“hh:mm:ss tt”）；
}
}
});
以下是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>


你好，世界{{time}
从“vue”导入{ref}
导出默认值{
设置（）{
var time=ref（）
设置间隔（（）=>{
time.value=new Date（）.toString（'hh:mm:ss tt'）
}, 1000)
返回{time}
}
}
请先阅读文档：）我建议先阅读vue文档，熟悉vue的运行方式，然后再发布到这里，因为这是一项非常入门级的任务