利用VUE实现一个简单的网页计算器。

在Vue.js中创建一个简单的网页计算器，你可以通过以下几个步骤实现：

1. **项目设置**：
首先，确保你已经安装了Node.js和Vue CLI，然后初始化一个新的Vue项目：

   vue create calculator-app
   cd calculator-app

2. **组件设计**：
创建一个名为`Calculator.vue`的组件，这个组件将包含两个输入框（显示数字和操作符），一个按钮数组（对应运算符）以及结果展示区域。

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

   <script>
   export default {
     data() {
       return {
         num1: 0,
         num2: 0,
         operator: '+',
         result: ''
       };
     },
     methods: {
       calculate() {
         let num1 = parseFloat(this.num1);
         let num2 = parseFloat(this.num2);

         switch (this.operator) {
           case '+':
             this.result = num1 + num2;
             break;
           case '-':
             this.result = num1 - num2;
             break;
           case '*':
             this.result = num1 * num2;
             break;
           case '/':
             if (num2 !== 0) {
               this.result = num1 / num2;
             } else {
               this.result = '除数不能为零';
             }
             break;
         }
       }
     }
   }
   </script>

3. **主应用**：
在`src/App.vue`中引入并使用`Calculator`组件：

   <template>
     <div id="app">
       <calculator></calculator>
     </div>
   </template>

   <script>
   import Calculator from './components/Calculator.vue';

   export default {
     components: {
       Calculator
     }
   }
   </script>

4. **运行应用**：
使用`npm run serve`启动本地服务器，然后在浏览器中访问`http://localhost:8080`查看计算器效果。

现在你就有了一个基本的Vue网页计算器。用户可以在输入框中输入数字，选择运算符，点击“计算”按钮得到结果。