当前位置：首页 > VUE

vue实现input值相加

2026-01-21 04:37:03VUE

实现 Vue 中 input 值相加

在 Vue 中实现两个 input 值的相加，可以通过数据绑定和计算属性来完成。以下是具体实现方法：

模板部分

<template>
  <div>
    <input v-model.number="num1" type="number" placeholder="输入第一个数字">
    <input v-model.number="num2" type="number" placeholder="输入第二个数字">
    <p>相加结果: {{ sum }}</p>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    }
  }
}
</script>

关键点说明

使用 v-model.number 修饰符确保输入值被自动转换为数字类型，避免字符串拼接问题。

计算属性 sum 会实时响应 num1 和 num2 的变化，自动更新计算结果。

处理非数字输入

如果需要处理非数字输入的情况，可以添加验证逻辑：

computed: {
  sum() {
    const n1 = isNaN(this.num1) ? 0 : this.num1;
    const n2 = isNaN(this.num2) ? 0 : this.num2;
    return n1 + n2;
  }
}

使用 watch 实现

也可以使用 watch 来实现类似功能：

data() {
  return {
    num1: 0,
    num2: 0,
    sum: 0
  }
},
watch: {
  num1(newVal) {
    this.sum = Number(newVal) + Number(this.num2);
  },
  num2(newVal) {
    this.sum = Number(this.num1) + Number(newVal);
  }
}

这种方法适合需要执行更复杂逻辑的场景。

vue实现input值相加