Vue编写简单的计算器

Vue是一个流行的前端框架，可以用于构建交互式的用户界面，包括简单的计算器应用。下面是一个基本的步骤来创建一个简单的Vue计算器示例：

1. **设置项目**:
首先安装Vue CLI，然后创建一个新的项目：`vue create calculator-app`

2. **组件化设计**:
- 创建两个组件：`Calculator.vue` (负责显示和计算) 和 `Button.vue` (每个按钮)
- `Calculator.vue` 中包含输入框、当前结果以及一组Button组件实例。

<template>
  <div>
    <input type="text" v-model.number="displayValue">
    <button @click="onButtonClick">{{ buttonText }}</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayValue: '',
      buttons: ['+', '-', '*', '/'],
      result: ''
    };
  },
  methods: {
    onButtonClick() {
      // 这里添加你的计算逻辑
    }
  }
};
</script>

3. **事件绑定**:
在`Button.vue` 中处理点击事件，改变`Calculator.vue` 的状态。

4. **计算逻辑**:
在`onButtonClick` 方法中，根据按钮类型更新`displayValue`，并计算新的结果。例如，加法可以是这样的：

methods: {
  onButtonClick(event) {
    const { value } = event.target;
    if (value === '=') {
      // 进行计算，比如 parseInt(displayValue) 对于整数计算
      this.result = calculate(this.displayValue);
      this.displayValue = '';
    } else {
      this.displayValue += value;
    }
  }
}

5. **完整计算器功能**:
添加更多按钮和对应的计算逻辑，如处理除法、负数等，并考虑错误检查和清理。