Question

在按钮上单击应触发一种方法：

fireAction() {
  let counter = 0;
  let total = resp.data.data.offers.length

  switch (operator) {
    case 'minus':
      if (counter > 0) {
        counter--
      }
      break;
    case 'plus':
      if (counter < total) {
        counter++
      }
      break;
  }
}
console.log(counter)

但是，当我单击加号按钮时，我的counter的值设置为1，如果再次单击，则值再次为1，++和--的工作方式有所不同当与Vue一起使用时？

我希望每次单击时将counter的值增加1，例如：1 + 1 = 2，然后2 + 1 = 3，依此类推。

更新

如果我在data()中设置了计数器，它将起作用：

data () {
  return {
    counter: 0
  }
}

然后在我的代码中将其用作this.counter-然后它可以工作。有人可以解释一下，为什么在使用counter作为let var而不是在data方法中时，为什么它在我的第一个代码块中不起作用？

Answer 1

任何数据元素都存在于所有方法或函数之外，因此本质上是局部“全局”变量。因此，根据您的问题，即使您在方法中将其递增，在fireAction（）中，变量计数器也会在每次调用时在方法内部进行初始化（设置为0）。如果在“数据”中定义，则可以在每次调用该方法时将其递增，并将其值保留下来。您可以在导出默认值之外定义变量，并在方法中使用它。例如：

<script>
let myVariable = 0

export default {

...

}

但是我当然更喜欢使用数据元素。

Answer 2

<div id="app">
  <div>{{ counter }}</div>
  <button v-on:click="increment('plus')">Increment</button>

<button v-on:click="increment('minus')">Decrement</button>
  </div>
</div>


new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment(operator) { 
switch (operator) {
case 'minus':
if (this.counter > 0) {
this.counter--;
}
break;
case 'plus':
this.counter++;
break;
}
}
}
});

计数器不增加1-Vue

2 个答案: