当前位置：首页 > VUE

vue 实现数字求和

2026-03-09 02:23:40VUE

Vue 实现数字求和的方法

使用计算属性（Computed）

在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>

使用方法（Methods）

如果需要更灵活的逻辑（如参数传递），可以使用方法实现。

<template>
  <div>
    <input v-model.number="num1" type="number" placeholder="输入第一个数字">
    <input v-model.number="num2" type="number" placeholder="输入第二个数字">
    <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>

使用Watch监听

当需要响应特定数据变化时，可以使用watch监听数据变动并触发求和。

<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,
      sum: 0
    };
  },
  watch: {
    num1(newVal) {
      this.sum = newVal + this.num2;
    },
    num2(newVal) {
      this.sum = this.num1 + newVal;
    }
  }
};
</script>

动态数组求和

若需要对动态数组中的数字求和，可以结合v-for和reduce方法。

vue 实现数字求和

<template>
  <div>
    <input v-model.number="newNumber" type="number" placeholder="输入数字">
    <button @click="addNumber">添加到数组</button>
    <ul>
      <li v-for="(num, index) in numbers" :key="index">{{ num }}</li>
    </ul>
    <p>数组求和：{{ arraySum }}</p>
  </div>
</template>

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