vue实现一个简单的网页计算器

Vue 实现一个简单的网页计算器可以分为以下几个步骤：

1. **创建项目**：
使用 Vue CLI 创建一个新的 Vue.js 项目，或者手动搭建基础结构。

2. **组件化设计**：
- **输入框**（Input）：创建两个 Input 组件分别用于显示数字和操作结果，可以使用 v-model 指令双向绑定数据。
- **按钮**（Button）：为了方便维护和代码复用，你可以为加、减、乘、除等操作各创建一个 Button 组件，并添加点击事件处理函数。

3. **计算逻辑**：
在父组件中，管理一个计算属性（如 `total`），并为每个操作按钮设置 `@click` 事件，触发相应的计算操作。例如：

<template>
  <div>
    <input v-model="num1" />
    <select v-model="operator">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input v-model="num2" />
    <button @click="calculate">计算</button>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      operator: '+',
      num2: '',
      result: '',
    };
  },
  methods: {
    calculate() {
      const numbers = [Number(this.num1), Number(this.num2)];
      switch (this.operator) {
        case '+':
          this.result = numbers[0] + numbers[1];
          break;
        case '-':
          this.result = numbers[0] - numbers[1];
          break;
        case '*':
          this.result = numbers[0] * numbers[1];
          break;
        case '/':
          if (numbers[1] !== 0) {
            this.result = numbers[0] / numbers[1];
          } else {
            // 处理除数为零的情况
            console.log('错误：除数不能为零');
            this.result = 'Error';
          }
          break;
      }
    },
  },
};
</script>

4. **样式美化**：
添加 CSS 样式，提升用户体验，比如颜色、间距和图标等。