当前位置：首页 > VUE

vue实现加法计算

2026-01-16 04:52:26VUE

Vue 实现加法计算的方法

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

使用双向数据绑定

通过 v-model 绑定输入框的值，计算结果显示在页面上。

<template>
  <div>
    <input v-model="num1" type="number" placeholder="输入第一个数字">
    <input v-model="num2" type="number" placeholder="输入第二个数字">
    <p>结果：{{ sum }}</p>
  </div>
</template>

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

使用方法触发计算

通过按钮点击触发计算逻辑，结果动态更新。

<template>
  <div>
    <input v-model="num1" type="number" placeholder="输入第一个数字">
    <input v-model="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 = Number(this.num1) + Number(this.num2);
    }
  }
};
</script>

使用表单提交

通过表单提交事件处理加法计算。

<template>
  <div>
    <form @submit.prevent="calculateSum">
      <input v-model="num1" type="number" placeholder="输入第一个数字">
      <input v-model="num2" type="number" placeholder="输入第二个数字">
      <button type="submit">计算</button>
    </form>
    <p>结果：{{ result }}</p>
  </div>
</template>

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

使用 Vue 3 Composition API

在 Vue 3 中可以使用 Composition API 实现加法计算。

<template>
  <div>
    <input v-model="num1" type="number" placeholder="输入第一个数字">
    <input v-model="num2" type="number" placeholder="输入第二个数字">
    <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(() => {
      return Number(num1.value) + Number(num2.value);
    });

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