当前位置：首页 > VUE

vue实现input值相加

2026-02-21 20:06:49VUE

实现两个 input 值相加

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

模板部分

<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 指令双向绑定输入框的值到数据属性 num1 和 num2 上

.number 修饰符自动将输入值转换为数字类型，避免字符串拼接问题

计算属性 sum 实时计算两个数值的和，当任一输入值变化时自动更新

处理非数字输入

为增强健壮性，可以添加输入验证：

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(val) {
    this.sum = Number(val) + Number(this.num2)
  },
  num2(val) {
    this.sum = Number(this.num1) + Number(val)
  }
}

vue实现input值相加