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

Question

嘿，我正在开发一个简单的游戏，如果用户点击按钮，那么分数将会加，即 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，而是将输出显示为 'My Score is 101'。可能的原因是什么？我试图将 'incre' 解析为 int 但结果是一样的。

Answer 1

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

Answer 2

'10' 是字符串。你需要

data: {
    score: 10,
}

Answer 3

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

Answer 4

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

检查片段：

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>

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

VUE JS : Onclick did not increment the score as expected

javascript

vue.js

onclick

vue-events