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" />