Vue.js Vue中的自动加载计数器

我对Vue很陌生。我想做的是。。加载HTML时，计时器将每秒自动开始计数。我的代码显示在下面，我从{{counter}}得到的总是0。这根本不算。请任何人给我一些建议。提前谢谢

在HTML中

<div id="app">
  <h3>You have opened this page for {{ counter }} seconds.</h3>
</div>

---

代码中有两个问题，但谢天谢地，它们很容易解决：

问题1：setInterval处理程序中的词法错误 使用setIntervalthis.tikTok时，1000；，tikTok方法将丢失对该词汇表的引用，即您的VueJS应用程序。要解决此问题，您可以：

使用ES6箭头函数，即setInterval=>this.tikTok，1000； 或者使用.bindthis传递contenxt，即setIntervalthis.tikTok.bindthis，1000； 问题2：计时器和tikTok应该是方法，而不是计算道具 timer和tikTok都不应该是计算的道具：它们永远不会被调用。相反，您应该简单地将它们定义为方法，然后在安装和呈现组件时调用计时器：

const app=新的Vue{ el:“应用程序”， 数据：{计数器：0}， 方法：{ 计时器：函数{setIntervalthis.tikTok，1000；}， tikTok:函数{++this.counter；} }, 安装：功能{ 这个。$nextTick=>{ 这个计时器； }; } }; 您已打开此页{{counter}}秒。

---

非常感谢@Terry，竖起大拇指！！

const app = new Vue({
  el: '#app',
  data: { counter: 0 },
  computed: {
    timer: function() { setInterval(this.tikTok, 1000); },
    tikTok: function() { ++this.counter; }
  }
});