用VUE实现简单计算器。

使用Vue.js实现一个简单的计算器，你可以按照以下步骤操作：

1. **创建项目**：首先确保已经安装了Vue CLI，然后通过命令行创建一个新的Vue项目：`vue create calculator-app`

2. **设置结构**：在`src/components`目录下创建一个名为`Calculator.vue`的组件文件。

3. **模板设计**：在`<template>`部分，可以编写HTML结构，包含两个输入框（显示数字和操作符），以及按钮用于执行加减乘除等基本运算。

<template>
  <div class="calculator">
    <input v-model.number="num1" type="number" placeholder="Number 1">
    <select v-model="operator">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input v-model.number="num2" type="number" placeholder="Number 2">
    <button @click="calculate">Calculate</button>
    <p>{{ result }}</p>
  </div>
</template>

4. **数据绑定和计算属性**：在`<script>`部分，定义数据对象，包括初始值（通常是0和空字符串）、结果变量，以及一个对象来保存运算操作。

<script>
export default {
  data() {
    return {
      num1: 0,
      operator: '',
      num2: 0,
      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.$message.error('Cannot divide by zero');
          }
          break;
        default:
          this.result = 'Invalid operator';
      }
    }
  }
};
</script>

5. **样式美化**：在`src/assets/styles`添加CSS样式，使界面更美观。

6. **主入口文件**：在`main.js`中引入并使用这个计算器组件，并将它挂在到Vue实例上。

7. **运行应用**：最后运行`npm run serve`启动本地服务器，打开浏览器查看你的简单计算器功能。