VUE JS：Onclick 没有按预期增加分数答案

【问题标题】：VUE JS : Onclick did not increment the score as expectedVUE JS：Onclick 没有按预期增加分数
【发布时间】：2021-03-30 10:25:06
【问题描述】：

嘿，我正在开发一个简单的游戏，如果用户点击按钮，那么分数将是加号，即 1。

new Vue({
  el: '#MyApp',
  data: {
    score: '10',
  },
  methods: {
    ScoreIncre: function(incre) {
      this.score += incre;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="MyApp">
  <p>My Score is {{score}</p>
  <button v-on:click="ScoreIncre(1)">Increase my Score</button>
</div>

单击按钮后，它不会将分数加上 +1，而是将输出显示为“我的分数是 101”。可能的原因是什么？我试图将“增量”解析为 int，但结果是一样的。

【问题讨论】：

'10' 是字符串。

标签： javascript vue.js onclick vue-events

【解决方案1】：

'10' 是字符串。你需要

data: {
    score: 10,
}

【讨论】：

【解决方案2】：

因为 score 是 '10' 所以它是一个字符串而不是数字这就是为什么当你增加 '10'+1 它是 '101' 而不是 11 时，你应该将 '10' 更改为 10

【讨论】：

【解决方案3】：

'10' 在您的代码中是一个字符串而不是一个数字。这就是为什么你不能增加它。将其声明为数字或不带引号，例如：10

【讨论】：

【解决方案4】：

您需要将10 保留为数字，而不是字符串，此外，您的模板中缺少一个花括号}。

检查sn-p：

new Vue({
  el: '#MyApp',
  data: {
    score: 10,
  },
  methods: {
    ScoreIncre: function(incre) {
      this.score += incre;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="MyApp">
  <p>My Score is {{score}}</p>
  <button v-on:click="ScoreIncre(1)">Increase my Score</button>
</div>

【讨论】：