Vue.JS 上的时间自动刷新

Question

我打算在 Vue 上展示这个时钟。这个时钟会自动刷新时间，但是如何转换这段代码？

有没有一种简单的方法可以将其转换为 Vue？ Vue 没有 (document.getElementBy...)

function time () {
    document.getElementById("time").innerHTML = new Date().toString("hh:mm:ss tt");
}
var timeInterval = setInterval(time, 1000); // recalls the function every 1000 ms

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

Answer 1

这是 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>

Answer 2

虽然可以使用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>