用vue3.0实现制作简易计算器

在 Vue 3.0 中实现一个简易计算器，你可以按照以下步骤进行：

1. **创建项目**: 使用 Vue CLI 来初始化一个新的 Vue 项目，运行 `vue create calculator`。

2. **设置组件**: 创建一个名为 Calculator 的 Vue 组件。在这个组件里，可以设计一个包含数字、运算符按钮以及显示区域的基础布局。你可以使用 `v-model` 指令绑定元素到数据属性上，如 `value` 用于存储当前输入。

<template>
  <div class="calculator">
    <input type="text" v-model.number="value" />
    <div>
      <!-- 数字按键 -->
      <button @click="increment">{{ numberButtons }}</button>
      <!-- 运算符按键 -->
      <button @click="operatorClick('+')">+</button>
      <button @click="operatorClick('-')">-</button>
      <button @click="operatorClick('*')">*</button>
      <button @click="operatorClick('/')">/</button>
      <!-- 清零和等于按钮 -->
      <button @click="clear">C</button>
      <button @click="calculate">=</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '0',
      operator: '',
      numberButtons: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
    };
  },
  methods: {
    increment() {
      this.value = Number(this.value) + 1;
    },
    operatorClick(op) {
      if (this.operator) {
        this.value += this.operator;
        this.operator = '';
      } else {
        this.operator = op;
      }
    },
    clear() {
      this.value = '0';
      this.operator = '';
    },
    calculate() {
      // 实现计算逻辑，这里只是一个基础示例，通常会涉及转换为Number、解析运算符等
      const result = eval(this.value);
      if (!isNaN(result)) {
        this.value = String(result);
      }
    },
  },
};
</script>

3. **样式**: 添加 CSS 样式以美化界面，并确保按钮点击响应和操作有效。

4. **添加事件处理**: 可以考虑在外部引入一个事件总线或者Vuex来管理计算器的状态，特别是在有多个计算器实例的情况下。

**注意**: 上述代码仅作教学演示，实际生产环境中应避免使用 `eval`，因为它存在安全风险，应该寻找更安全的方式来解析和执行用户输入的表达式。