当前位置：首页 > VUE

vue实现加法计算

2026-03-29 05:20:56VUE

实现加法计算的方法

在Vue中实现加法计算可以通过数据绑定和事件监听来完成。以下是几种常见的实现方式：

使用v-model和计算属性

通过v-model绑定输入框的值，使用计算属性实时计算总和：

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

使用方法触发计算

通过按钮点击触发计算方法：

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

使用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 = Number(newVal) + Number(this.num2)
    },
    num2(newVal) {
      this.sum = Number(this.num1) + Number(newVal)
    }
  }
}
</script>

处理浮点数精度

对于浮点数加法，可以使用toFixed方法控制小数位数：

vue实现加法计算

<template>
  <div>
    <input v-model.number="num1" type="number" step="0.01" placeholder="输入第一个数字">
    <input v-model.number="num2" type="number" step="0.01" placeholder="输入第二个数字">
    <p>计算结果：{{ sum.toFixed(2) }}</p>
  </div>
</template>

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