vue实现一个简单的网页计算机，带按钮

在Vue.js中创建一个简单的网页计算器，你可以通过HTML、CSS和JavaScript结合Vue组件来实现。下面是一个基础的例子，它包含两个数字输入框、一个加法操作符按钮和结果显示区域：

<template>
  <div class="calculator">
    <input type="number" v-model.number="num1" placeholder="Number 1">
    +
    <input type="number" v-model.number="num2" placeholder="Number 2">
    =
    <span>{{ result }}</span>
    <button @click="addNumbers">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      result: ''
    };
  },
  methods: {
    addNumbers() {
      if (this.num1 && this.num2) {
        this.result = parseInt(this.num1) + parseInt(this.num2);
        this.num1 = '';
        this.num2 = '';
      }
    }
  }
};
</script>

<style scoped>
.calculator {
  display: flex;
  justify-content: space-between;
}
input[type=number] {
  width: 50px;
  margin-right: 10px;
}
</style>

在这个例子中，`v-model.number`用于绑定数值型的输入，并确保输入始终保持为数字。当用户点击“Add”按钮时，`addNumbers`方法会被触发，将`num1`和`num2`相加，并清空这两个字段。

**注意：** 这只是一个非常基础的计算器示例，实际项目中你可能还需要处理更多边缘情况，比如错误处理、运算符的选择等。此外，为了更完整的用户体验，你可能还会考虑使用Vue的指令如`v-once`来优化计算性能。