vue实现简单网页计算机（包括加、减、乘、除、括号操作）

在Vue.js中实现一个简单的计算器，你可以通过创建组件来构建用户界面，并结合JavaScript处理计算逻辑。以下是实现步骤：

1. **创建组件**：
首先，创建一个名为`Calculator.vue`的文件，定义一个组件结构，包含输入框、按钮和结果展示区。

<template>
  <div class="calculator">
    <input v-model.number="number1" type="number" placeholder="请输入第一个数字">
    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input v-model.number="number2" type="number" placeholder="请输入第二个数字">
    <button @click="calculate">计算</button>
    <p>结果：{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: '',
      operator: '+',
      number2: '',
      result: ''
    }
  },
  methods: {
    calculate() {
      let num1 = parseFloat(this.number1);
      let num2 = parseFloat(this.number2);
      
      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 {
            console.error('除数不能为零');
          }
          break;
        default:
          this.result = '';
      }
    }
  }
};
</script>

<style scoped>
.calculator {
  // 样式自定
}
</style>

2. **组件使用**：
在主入口的`App.vue`或其他适当的地方引入并使用这个`Calculator`组件。

3. **测试组件**：
创建页面后，在浏览器中打开查看效果，你可以手动输入数字和选择运算符，点击“计算”按钮，结果会实时显示在页面上。