用vue制作一个简易计算器

在Vue中创建一个简易计算器可以分为以下几个步骤：

1. **项目初始化**：首先安装Vue CLI并创建一个新的项目。

vue create calculator-app

2. **组件设计**：创建一个名为`Calculator.vue`的组件，它将包含输入框、数字按钮、运算符按钮以及结果显示区域。

<template>
  <div class="calculator">
    <input type="number" v-model.number="display" @keyup.enter="calculate" />
    <div v-for="(button, index) in buttons" :key="index">
      <button @click="handleClick(button.value)">{{ button.text }}</button>
    </div>
    <span> = {{ result }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: '',
      result: '',
      buttons: [
        { text: '7', value: 7 },
        // 添加其他数字和运算符按钮...
      ],
      operations: ['+', '-', '*', '/']
    };
  },
  methods: {
    handleClick(value) {
      this.display += value;
    },
    calculate() {
      if (this.operations.includes(this.display)) {
        this.result = eval(this.display);
        this.display = '';
      }
    }
  }
};
</script>

3. **样式设计**：添加一些基本的CSS样式，让计算器看起来更美观。

4. **路由配置**：如果需要，可以在`main.js`中设置路由以便在点击“=”按钮时显示结果。

5. **运行应用**：通过`npm run serve`启动应用，在浏览器中查看效果。