当前位置：首页 > VUE

vue实现输入数字相加

2026-02-25 04:10:14VUE

实现输入数字相加的Vue方案

数据绑定与输入处理

在Vue组件中定义响应式数据存储输入值和计算结果：

data() {
  return {
    input1: 0,
    input2: 0,
    sum: 0
  }
}

模板中使用v-model实现双向绑定：

<input type="number" v-model.number="input1" placeholder="输入第一个数字">
<input type="number" v-model.number="input2" placeholder="输入第二个数字">

计算属性实现自动求和

使用计算属性自动响应输入变化：

vue实现输入数字相加

computed: {
  total() {
    return Number(this.input1) + Number(this.input2)
  }
}

模板中显示结果：

<p>求和结果: {{ total }}</p>

方法触发式求和

通过按钮触发计算的方法：

vue实现输入数字相加

methods: {
  calculateSum() {
    this.sum = parseFloat(this.input1) + parseFloat(this.input2)
  }
}

对应模板：

<button @click="calculateSum">计算求和</button>
<p v-if="sum !== 0">计算结果: {{ sum }}</p>

输入验证增强

添加数字格式验证：

methods: {
  validateInput() {
    if(isNaN(this.input1) || isNaN(this.input2)) {
      alert('请输入有效数字')
      return false
    }
    return true
  }
}

动态样式反馈

根据结果添加视觉反馈：

<p :class="{ 'text-danger': sum < 0, 'text-success': sum >= 0 }">
  结果: {{ sum }}
</p>

完整组件示例

<template>
  <div class="calculator">
    <input v-model.number="num1" type="number">
    <span>+</span>
    <input v-model.number="num2" type="number">
    <button @click="sumNumbers">=</button>
    <div>结果: {{ result }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      result: null
    }
  },
  methods: {
    sumNumbers() {
      this.result = this.num1 + this.num2
    }
  }
}
</script>