vue实现简单的加法

实现思路

在Vue中实现简单的加法功能，可以通过数据绑定和事件监听完成。需要定义两个输入框存储加数，一个计算属性或方法求和，最后将结果显示在页面上。

代码示例

<template>
  <div>
    <input type="number" v-model.number="num1" placeholder="输入第一个数字">
    <span> + </span>
    <input type="number" v-model.number="num2" placeholder="输入第二个数字">
    <span> = </span>
    <span>{{ sum }}</span>
  </div>
</template>

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

关键点说明

使用v-model.number指令绑定输入框的值，.number修饰符确保输入值自动转为数字类型。

计算属性sum实时计算num1和num2的和，当任一加数变化时结果自动更新。

替代方案

若需通过方法计算，可替换为：

methods: {
  calculateSum() {
    return this.num1 + this.num2;
  }
}

模板中调用方法：

<span>{{ calculateSum() }}</span>