用vue做一个简易计算器

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

1. **安装 Vue**：首先确保已安装Node.js，然后全局安装Vue CLI:

   npm install -g @vue/cli

2. **创建项目**：

   vue create calculator-app
   cd calculator-app

3. **构建组件**：
a. 在`src/components`目录下创建一个新的文件夹叫`Calculator`, 然后在其中创建一个名为`Calculator.vue`的文件。在这个文件里，创建一个包含按钮、显示框和操作符的结构，如下面这个例子：

   <template>
     <div>
       <input v-model.number="result" type="number" disabled :value="displayValue">
       <div v-for="(operator, index) in operators" :key="index">
         <button @click="applyOperator(operator)" :class="{ active: selectedOperator === operator }">{{ operator }}</button>
       </div>
       <button @click="clearResult">清除</button>
       <button @click="calculate">计算</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         result: '',
         displayValue: '0',
         selectedOperator: '',
         operators: ['+', '-', '*', '/'],
       };
     },
     methods: {
       applyOperator(operator) {
         this.selectedOperator = operator;
       },
       calculate() {
         const num1 = parseFloat(this.displayValue);
         const num2 = parseFloat(this.result);
         let result;

         switch (this.selectedOperator) {
           case '+':
             result = num1 + num2;
             break;
           case '-':
             result = num1 - num2;
             break;
           case '*':
             result = num1 * num2;
             break;
           case '/':
             if (num2 !== 0) {
               result = num1 / num2;
             } else {
               alert('除数不能为零');
             }
             break;
           default:
             // 如果没有选择任何运算符，结果不变
             break;
         }

         this.result = result;
         this.selectedOperator = '';
         this.clearResult();
       },
       clearResult() {
         this.result = '';
         this.displayValue = '0';
       },
     },
   };
   </script>

4. **主入口文件（main.js）**中引入并使用这个组件，并在App.vue或者其他适当的地方挂载它。

5. **运行应用**：

   npm run serve

现在你已经创建了一个基本的Vue计算器，用户可以输入数字，选择运算符，点击相应按钮，然后进行计算。