1

嘿，我正在做一个简单的游戏，如果用户点击按钮，那么分数将加 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，但结果是一样的。

4

4 回答 4

2

'10'是字符串。你需要

data: {
    score: 10,
}
于 2021-03-30T10:31:10.477 回答
1

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

于 2021-03-30T10:32:30.973 回答
1

您需要保留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>

于 2021-03-30T10:34:48.237 回答
1

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

于 2021-03-30T10:30:47.047 回答