时间戳

首页 > 解决方案 > Vue中的自动onLoad计数器

vue.js - Vue中的自动onLoad计数器

问题描述

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

在 HTML 中，

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

在 JS 中，

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

标签： vue.js

解决方案

您的代码有两个问题，但幸运的是，它们可以很容易地解决：

问题 1：处理程序this中的词汇setInterval()

当您使用setInterval(this.tikTok, 1000);时，该tikTok方法会丢失对词汇的引用this（即您的 VueJS 应用程序）。要解决此问题，您可以：

  • 使用 ES6 箭头函数，即setInterval(() => this.tikTok(), 1000);
  • 或用于.bind(this)传递上下文，即setInterval(this.tikTok.bind(this), 1000);

问题 2：timer并且tikTok应该是方法，而不是计算道具

两者都不应该是计算的道具：它们永远不会被调用timer。tikTok相反，您应该简单地将它们定义为methods，然后timer在安装和渲染组件时调用：

const app = new Vue({
  el: '#app',
  data: { counter: 0 },
  methods: {
    timer: function() { setInterval(this.tikTok, 1000); },
    tikTok: function() { ++this.counter; }
  },
  mounted: function() {
      this.$nextTick(() => {
          this.timer();
      });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>You have opened this page for {{ counter }} seconds.</h3>
</div>

推荐阅读