当前位置：首页 > VUE

vue 实现数字求和

2026-01-16 21:25:57VUE

Vue 实现数字求和的方法

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

使用计算属性（Computed）

计算属性适合处理响应式数据的求和逻辑，当依赖的数据变化时，会自动重新计算。

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

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

使用方法（Methods）

通过方法触发求和逻辑，适合需要手动控制计算时机的场景。

<template>
  <div>
    <p>数字1: <input v-model.number="num1" type="number"></p>
    <p>数字2: <input v-model.number="num2" type="number"></p>
    <button @click="calculateSum">计算求和</button>
    <p>求和结果: {{ result }}</p>
  </div>
</template>

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

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 ref 或 reactive 结合计算属性实现求和。

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

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const num1 = ref(0)
    const num2 = ref(0)
    const sum = computed(() => num1.value + num2.value)

    return {
      num1,
      num2,
      sum
    }
  }
}
</script>

处理多数字求和

如果需要动态添加多个数字并求和，可以使用数组和 v-for 指令。

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

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