Vue 计算属性，加法与连接问题

Question

刚刚学习 Vue，我偶然发现了一个有趣的行为，我想知道为什么会发生这种情况以及如何避免它。

<template>
  <div>
    <input type="number" v-model="a" style="color: white" />
    <input type="number" v-model="b" style="color: white" />
    <p style="color: white">{{ c }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  computed: {
    c: function() {
      return this.a + this.b;
    }
  }
};
</script>

在第一次渲染时，'c' 显示为“3”，这是我所期望的。但是，如果我更改其中一个输入，则这两个数字将连接在一起。例如，如果我将 'a' 更改为“11”，我的预期值为 13，但我得到的是“112”。为什么会这样？

Answer 1

只需使用 Number 对象构造函数来求和 :

  computed: {
    c: function() {
      return Number(this.a) + Number(this.b);
    }
  }

这两个操作数被视为字符串，当您尝试在它们之间放置 + 时，它们将被连接起来，为了避免默认行为尝试使用 Number 构造函数或 parseInt, parseFloat 函数将行为更改为求和运算。

或尝试在 v-model 指令中使用 number 修饰符，例如：

<input type="number" v-model.number="b" style="color: white" />

Vue 计算属性，加法与连接问题

Vue computed properties, issues with addition vs concatenation

javascript

vue.js

computed-properties

vue-component

vuejs2