当前位置：首页 > VUE

vue 实现数字求和

2026-02-17 13:59:08VUE

实现数字求和的方法

在Vue中实现数字求和可以通过多种方式完成，以下是一些常见的实现方法：

数据绑定与计算属性

在Vue组件中定义两个数字数据属性，使用计算属性实时计算它们的和：

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <p>求和结果：{{ sum }}</p>
  </div>
</template>

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

方法调用方式

通过方法触发求和计算，适合需要手动触发计算的场景：

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <button @click="calculateSum">计算求和</button>
    <p v-if="result !== null">求和结果：{{ result }}</p>
  </div>
</template>

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

多数字数组求和

处理多个数字的求和场景，使用数组和reduce方法：

<template>
  <div>
    <div v-for="(num, index) in numbers" :key="index">
      <input v-model.number="numbers[index]" type="number">
    </div>
    <button @click="addNumber">添加数字</button>
    <p>总和：{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [0]
    }
  },
  computed: {
    total() {
      return this.numbers.reduce((acc, curr) => acc + curr, 0)
    }
  },
  methods: {
    addNumber() {
      this.numbers.push(0)
    }
  }
}
</script>

使用watch监听变化

当需要更复杂的求和逻辑时，可以使用watch监听数据变化：

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <p>求和结果：{{ sum }}</p>
  </div>
</template>

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

以上方法涵盖了Vue中实现数字求和的主要场景，开发者可以根据具体需求选择最适合的实现方式。

vue 实现数字求和