用vue做一个计算器

在Vue.js中创建一个简单的计算器，你可以按照以下几个步骤进行：

1. **项目初始化**:
- 使用Vue CLI创建一个新的项目，例如：`vue create calculator-app`
- 进入项目目录并安装Vue Router（如果需要添加页面导航）: `cd calculator-app && npm install vue-router`

2. **组件设计**:
- 创建主视图组件（如Calculator.vue）:

     <template>
       <div>
         <input v-model="display" type="text" disabled>
         <div v-for="(button, index) in buttons" :key="index">
           <button @click="handleClick(button)" :class="{ active: selectedButton === button }">{{ button }}</button>
         </div>
         <button @click="clearDisplay">C</button>
         <button @click="performMathOperation">=</button>
       </div>
     </template>

     <script>
       export default {
         data() {
           return {
             display: '',
             selectedButton: null,
             buttons: ['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '+'],
           };
         },
         methods: {
           handleClick(button) {
             this.display += button;
             if (button === '=') {
               // 实现计算逻辑
             }
             this.selectedButton = button;
           },
           clearDisplay() {
             this.display = '';
             this.selectedButton = null;
           },
           performMathOperation() {
             // 解析当前显示并计算结果
           },
         },
       };
     </script>

3. **实现计算逻辑**:
- 在`performMathOperation`方法中，你可以解析用户输入的表达式（字符串），然后使用JavaScript的eval()函数或者正则表达式+操作数栈来计算结果。注意，由于安全原因，实际应用中不推荐使用eval，可以考虑第三方库如mathjs。

4. **路由配置（如果有需求）**:
- 如果有多个计算器页面，可以使用Vue Router设置路径和组件映射。

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
  { path: '/calculator', component: Calculator }
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});