Question

刚开始学习Vue.js，我很好奇我的简单代码中发生了什么，我找不到很好的表现。我正在尝试增加小胡子内部的计数器，但是此变量发生了一些奇怪的事情

我的代码：

Key

IMap

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>中接收。我认为我可以在小胡子sytaxt中运行表达式，但在这种情况下它对我不起作用。

有人能解释一下幕后发生的事情吗？

Answer 1

您在每个渲染调用上正在运行counter++的{{1}}。更改实例状态将重新呈现组件，这将使计数器一次又一次递增，从而导致无限循环，如Vue会正确警告您。

相反，您应该在点击处理程序函数中更新counter = counter + 1：

counter

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

胡子中的Vue模板语法增量

1 个答案: