Vue3计算器的制作

一、HTML布局

<div class="display">
    <div class="content">
      <div>{{ exp }}</div>
      <div>{{ res }}</div>
    </div>
    <div class="box">
      <div class="btn ac" @click="handleAcClick">AC</div>
      <div class="btn c" @click="handleBackspaceClick">C</div>
      <div
      @click="handleBtnClick(v)"
        class="btn o"
        v-for="(v, i) in [
          '%',
          '/',
          '7',
          '8',
          '9',
          '+',
          '4',
          '5',
          '6',
          '-',
          '1',
          '2',
          '3',
          '*',
          '.',
          '0',
        ]"
        :key="i"
      >
        {{ v }}
      </div>

      <div class="btn eq" @click="handleEqClick">=</div>
    </div>
  </div>

二、参数以及函数引入

import { ref } from "vue";
export default {
  name: "ElCalc",
  setup() {
    var exp = ref("");
    var res = ref("");
    var handleAcClick = () => {
      exp.value = "";
      res.value = "";
    };
    var handleBackspaceClick = () => {
      exp.value = exp.value.slice(0, -1);
    };
    var handleBtnClick = (value) => {
      exp.value += value;
    };
    var handleEqClick = () => {
      try {
        res.value = eval(exp.value);
      } catch {
        res.value = "表达式错误";
      }
    };
    return {
      exp,
      res,
      handleAcClick,
      handleBackspaceClick,
      handleBtnClick,
      handleEqClick,
    };
  },
};

三、CSS布局

* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
.display {
  width: 402px;
  height: 500px;
  border: 1px solid black;
}

.display .content {
  height: 150px;
  /* display: flex; */
  /* justify-content: flex-end; */
  /* align-items: flex-end; */
  padding: 20px;
  font-size: 30px;
}
.box {
  background: rgb(164, 163, 163);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.btn {
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border: 1px solid #fff;
  cursor: pointer;
}
.eq {
  width: 200px;
}

注意：

引入到App.vue即可正常使用