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

问题描述

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

解决方法

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

,

'10' 是字符串。你需要

data: {
    score: 10,}

,

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

,

您需要将 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>