vue3做一个计算器

在Vue3中制作一个简单的计算器，你可以遵循以下步骤：

1. **设置项目结构**：
创建一个新的Vue组件文件（如Calculator.vue），并引入Vue库。

2. **模板部分（template）**：
设计HTML结构，包含两个输入框用于数字输入、一个按钮数组表示运算符以及一个结果显示区域。

<template>
  <div class="calculator">
    <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>

3. **数据绑定（data）**：
初始化必要的数据，如当前输入的数字(num1和num2)，运算符(operator)以及结果(result)。

<script setup>
import { ref } from 'vue';

const num1 = ref(0);
const num2 = ref(0);
const operator = ref('');
const result = ref(null);

// 简单计算函数
function calculate() {
  const value1 = parseFloat(num1.value);
  const value2 = parseFloat(num2.value);
  let res;

  switch (operator.value) {
    case '+':
      res = value1 + value2;
      break;
    case '-':
      res = value1 - value2;
      break;
    case '*':
      res = value1 * value2;
      break;
    case '/':
      if (value2 !== 0) {
        res = value1 / value2;
      } else {
        // 防止除以零错误
        alert('Error! Division by zero is not allowed.');
        return;
      }
      break;
    default:
      res = null;
  }

  result.value = res;
}
</script>

4. **样式（style）**：
添加一些基本样式以便于用户交互。

<style scoped>
.calculator {
  width: 200px;
  margin: auto;
}
</style>

这个简单计算器可以处理加减乘除操作，点击`=`按钮会触发`calculate`函数进行计算。注意这只是一个基础版本，实际应用可能需要添加更多功能如历史记录、清除按钮等，并考虑更多的边界条件和异常处理。