用vue3写一个计算机包含四则运算

在 Vue3 中，我们可以创建一个简单的计算器组件，利用模板、计算属性以及事件监听来实现基本的四则运算功能。这里是一个基础的示例：

<template>
  <div class="calculator">
    <input v-model.number="display" disabled @keydown.enter="calculate" />
    <div class="buttons">
      <button @click="handleOperation('+')">+</button>
      <button @click="handleOperation('-')">-</button>
      <button @click="handleOperation('*')">*</button>
      <button @click="handleOperation('/')">/</button>
      <button @click="clearDisplay">C</button>
      <button @click="digit(7)">7</button>
      <!-- 添加更多的数字按钮 -->
      <button @click="digit(0)">0</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: '',
      operations: ['+', '-', '*', '/'],
    };
  },
  methods: {
    handleOperation(op) {
      if (this.display !== '') {
        this.result = eval(this.display + op);
        this.display = this.result;
      } else {
        this.display += op;
      }
    },
    clearDisplay() {
      this.display = '';
    },
    digit(num) {
      this.display += num;
    },
    calculate(event) {
      if (event.key === 'Enter') {
        try {
          const result = eval(this.display);
          this.display = result.toString();
        } catch (error) {
          // 处理除数为零等错误情况
          console.error('Invalid operation');
          this.display = '';
        }
      }
    },
  },
};
</script>
<style scoped>
.calculator {
  /* 样式可以根据需求定制 */
}
</style>

在这个例子中，我们有一个输入框显示当前的数值，按钮分别对应加减乘除和清除操作。点击数字按钮会更新显示，点击运算符按钮会在当前值上添加运算符。用户按下回车键时，会尝试执行表达式的计算并显示结果。

注意这只是一个非常基础的计算器实现，实际应用中还需要考虑更多边界情况和错误处理，例如防止恶意输入导致的安全问题。