两数四则运算计算器

闲的没事睡不着觉
做个简单的不能再简单的计算器玩玩

<template>
  <div class="container">
    <div id="app">
      <div class="ddd">两数四则计算器</div>
      <div class="context">
        <label>请输入：</label>
        <input type="number" v-model="ipt1" />
        <ul class="btn">
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="currentIndex == index ? 'changeColor' : ''"
            @click="color(index)"
          >
            {{ item }}
          </li>
        </ul>
        <input type="number" class="ipt" v-model="ipt2" />
      </div>
      <button class="jisuan" @click="fun">点击计算</button>
      <div class="res">
        计算结果：<span :key="index" v-for="(item, index) in result">{{
          item
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: -1,
      ipt1: "",
      ipt2: "",
      list: ["+", "-", "*", "/"],
      result: []
    }
  },
  methods: {
    color(index) {
      this.currentIndex = index;
    },
    fun() {
      this.result = [];
      let ans, val1, val2, flag;
      val1 = Number(this.ipt1);
      val2 = Number(this.ipt2);
      flag = this.list[this.currentIndex];
      if (flag == "+") {
        ans = val1 + val2;
      } else if (flag == "*") {
        ans = val1 * val2;
      } else if (flag == "-") {
        ans = val1 - val2;
      } else {
        ans = val1 / val2;
      }
      if (!(ans % 1 == 0)) ans = ans.toFixed(2);
      this.result.push(`${val1} ${flag} ${val2} = ${ans}`);
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#app {
  color: white;
  background-color: rgb(25, 14, 176);
  width: 330px;
  height: 200px;
  position: relative;
}

li {
  border-radius: 5px;
  border: 1px solid black;
  list-style: none;
  background-color: aliceblue;
  color: black;
  text-align: center;
  font-size: 10px;
  cursor: pointer;
}

input {
  border-radius: 5px;
  width: 50px;
}

.label {
  margin-top: 50px;
}

.btn {
  display: flex;
  flex-direction: column;
  width: 50px;
  position: absolute;
  left: 115px;
  top: 40px;
}

header {
  margin-left: 135px;
  margin-bottom: 20px;
}

.ipt {
  margin-left: 100px;
}

.res {
  margin-top: 50px;
}

.changeColor {
  background-color: orangered;
}

.jisuan {
  position: absolute;
  left: 250px;
  top: 150px;
  cursor: pointer;
}
.ddd {
  font-size: 20px;
  color: rgb(246, 231, 133);
  text-align: center;
  margin-bottom: 50px;
}
</style>

效果：