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;
    },

  },
});

Answer 1

这更像是一个javascript问题，而不是vue问题。

如果您想添加两个号码，可以使用parseInt()功能：

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

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。

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

Answer 3

此代码有效：）

new Vue({
    el: '#app',
    data:{
        firstNum: 0,
        secondNum: 0,
    },
})

<div id="app">
  First Number
  <input type="text" v-on:input="firstNum = parseFloat($event.target.value)"/>
  Second Number
  <input type="text" v-on:input="secondNum = parseFloat($event.target.value)"/>

  Result 
  <h1><span style="color: red">{{firstNum + secondNum}}</span></h1>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="main.js"></script>
<div>

用vue计算数字

3 个答案: