javascript - mustache 中的Vue模板语法增量

Question

刚开始学习 Vue.js，我很好奇我的简单代码中发生了什么，我找不到解释。我试图增加 mustache 内的计数器，但是这个变量发生了一些奇怪的事情

我的代码:

new Vue({
  el: '#app',
  data: {
    counter: 5,
    state: false
  },
  methods: {
    fun: function() {
      this.state = !this.state
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ counter }}</p>
 <button v-on:click="fun">Button</button>
 <p v-if="state">
    Miss me? {{ counter++ }}
 </p>
</div>

当调用 counter++ 时，我在控制台中收到[Vue warn]: You may have anInfini update Loop in a component render function.。我认为我可以在 Mustache sytaxt 中运行表达式，但在这种情况下它对我不起作用。

有人可以解释一下幕后发生了什么吗？

Answer 1

您在每次渲染调用时运行 counter++，即 counter = counter + 1。更改实例状态将重新渲染组件，这将一次又一次地增加计数器，导致无限循环，就像 Vue 正确警告您一样。

相反，您应该更新点击处理函数中的计数器:

new Vue({
  el: '#app',
  data: {
    counter: 5,
    state: false
  },
  methods: {
    fun: function() {
      this.counter++;
      this.state = !this.state
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ counter }}</p>
 <button v-on:click="fun">Button</button>
 <p v-if="state">
    Miss me? {{ counter }}
 </p>
</div>