用vue计算数字

Question

我真的是 vueJS 的新手。

我尝试获取两个输入值，将它们相加，然后显示结果。我发现它真的有线，因为当 number1 减去 number3，或者 number1 乘以 number2，或者 number1 除 number2，计算都可以正常工作。但是，当 number1 加上 number2 时，它不起作用，并且似乎将两个 str 加在一起（例如：1 + 2 = 12）。

这里发生了什么？我怎样才能得到 number1 + number2 的结果

请帮忙

    <div id="app">

            <input type="number" name="number1" v-on:input= "update_number1">
            <p>{{ number1 }}</p>
            <input type="number" name="number2" v-on:input= "update_number2">
            <p>{{ number2 }}</p>

            <hr>
            <p>{{ result() }}</p>

    </div>

     new Vue({
      el: '#app',
      data: {
        number1: 0,
        number2: 0,
      },
      methods: {
        update_number1: function (event) {
          this.number1 = event.target.value;
        },
        update_number2: function (event) {
          this.number2 = event.target.value;
        },
        result: function () {

          return this.number1 + this.number2;
        },

      },
    });

原文由 Xiaozhou Song 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这更可能是 javascript 问题而不是 vue 问题。

如果你想添加两个数字，你可以使用 parseInt() 函数如下：

 result: function () {
  return parseInt(this.number1) + parseInt(this.number2);
}

原文由 samayo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

看看下面更新的小提琴：

 new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
  },
  computed: {
    result() {
        return parseInt(this.number1) + parseInt(this.number2);
    }
  }
});

 <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
            <input type="number" name="number1" v-model="number1">
            <p>{{ number1 }}</p>
            <input type="number" name="number2" v-model="number2">
            <p>{{ number2 }}</p>
            <hr>
            <p>{{ result }}</p>
</div>

我们改变了什么？ :

• 我们使用 v-model 将 number1 和 number2 绑定到输入，这样它们就会对输入字段的变化做出反应。
• 我们将 result 更改为 computed 属性。
• 我们将 number1 和 number2 解析为 Integers 他们总是返回数值。
• 我们从模板中删除了 () ，这样 results() 就变成了 result 。

如果您有任何问题或不明白，请告诉我。

原文由 OArnarsson 发布，翻译遵循 CC BY-SA 4.0 许可协议