当前位置：首页 > VUE

vue 实现数字求和

2026-03-29 13:50:55VUE

实现数字求和的方法

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

方法一：使用计算属性（Computed）

计算属性是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>

方法二：使用方法（Methods）

vue 实现数字求和

如果需要在特定事件触发时计算求和结果，可以使用方法。

<template>
  <div>
    <input v-model.number="num1" type="number" />
    <input v-model.number="num2" type="number" />
    <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监听器

vue 实现数字求和

如果需要在数据变化时自动执行求和操作，可以使用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>

方法四：动态求和多个数字

如果需要动态求和多个数字，可以使用数组和循环。

<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, num) => acc + num, 0);
    }
  },
  methods: {
    addNumber() {
      this.numbers.push(0);
    }
  }
};
</script>