我需要一个使用VUE3的简易计算器代码

好的，以下是一个使用 Vue 3 实现的简易计算器代码：

<template>
  <div class="calculator">
    <div class="display">{{ display }}</div>
    <div class="buttons">
      <button v-for="button in buttons" :key="button.value" @click="handleButtonClick(button)">
        {{ button.label }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: "0",
      buttons: [
        { label: "C", value: "clear" },
        { label: "÷", value: "/" },
        { label: "7", value: "7" },
        { label: "8", value: "8" },
        { label: "9", value: "9" },
        { label: "×", value: "*" },
        { label: "4", value: "4" },
        { label: "5", value: "5" },
        { label: "6", value: "6" },
        { label: "-", value: "-" },
        { label: "1", value: "1" },
        { label: "2", value: "2" },
        { label: "3", value: "3" },
        { label: "+", value: "+" },
        { label: "0", value: "0" },
        { label: ".", value: "." },
        { label: "=", value: "equal" },
      ],
    };
  },
  methods: {
    handleButtonClick(button) {
      switch (button.value) {
        case "clear":
          this.display = "0";
          break;
        case "equal":
          this.display = eval(this.display);
          break;
        default:
          this.display =
            this.display === "0" ? button.value : this.display + button.value;
          break;
      }
    },
  },
};
</script>

<style>
.calculator {
  width: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 20px;
}

.display {
  height: 60px;
  line-height: 60px;
  text-align: right;
  padding-right: 10px;
  font-size: 30px;
  font-weight: bold;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
}

button {
  width: 75px;
  height: 60px;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #fff;
  cursor: pointer;
}

button:hover {
  background-color: #f2f2f2;
}

button:active {
  background-color: #e6e6e6;
}
</style>

上面的代码中，我们首先定义了一个包含 `display` 和 `buttons` 两个数据的组件。`display` 用来显示计算结果，`buttons` 则是一个按钮数组，包含了计算器上的各个按钮信息。

接着，我们定义了一个 `handleButtonClick` 方法，该方法用来处理按钮点击事件。当用户点击清空按钮时，我们将 `display` 设置为 "0"；当用户点击等于按钮时，我们将 `display` 的值传入 `eval` 函数中进行计算，并将结果显示在 `display` 中；当用户点击其他按钮时，我们将根据按钮的值更新 `display` 的值。

最后，我们在模板中使用 `v-for` 指令遍历 `buttons` 数组，渲染出计算器的各个按钮，同时绑定 `handleButtonClick` 方法来处理按钮点击事件。