用vue3写一个计算机包含四则运算和0-9数字

在Vue 3中编写一个支持四则运算和0-9数字的简单计算器，我们可以创建一个组件（如`Calculator.vue`），结合模板、数据以及方法来实现。这里是一个基本示例：

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

<script>
export default {
  data() {
    return {
      num1: '',
      operator: '+',
      num2: '',
      result: ''
    };
  },
  methods: {
    calculate() {
      const numbers = [Number(this.num1), Number(this.num2)];
      let operation;
      
      switch (this.operator) {
        case '+':
          this.result = numbers[0] + numbers[1];
          break;
        case '-':
          this.result = numbers[0] - numbers[1];
          break;
        case '*':
          this.result = numbers[0] * numbers[1];
          break;
        case '/':
          if (numbers[1] !== 0) {
            this.result = numbers[0] / numbers[1];
          } else {
            this.result = '错误：除数不能为零';
          }
          break;
      }
    }
  }
};
</script>

<style scoped>
.calculator {
  display: flex;
  align-items: center;
}
</style>

在这个例子中，我们创建了两个输入框用于输入数字，一个下拉菜单选择运算符，一个按钮触发计算，并将结果显示在一个段落里。`v-model`指令连接视图层和数据模型。