计算器vue

 <div class="cou">
      <div class="cou-input">
        <input class="cou-input-value" type="text" readonly v-model="value" v-if="open" />
        <input class="cou-input-result" type="text" readonly v-model="result" />
      </div>
      <div class="cou-enter">
        <ul class="cou-enter-num">
          <li
            v-for="(item,index) in numList"
            :key="index"
            @click="enterValue(item)"
          >
            <div v-if="item.num">{{item.num}}</div>
            <div v-else>{{item.symbol}}</div>
          </li>
        </ul>
        <ul class="cou-enter-operate">
          <li @click="delValue()">删除</li>
          <li @click="clearValue()">清零</li>
          <li @click="resultValue()">=</li>
        </ul>
      </div>
    </div>
    

charAt() 方法可返回指定位置的字符; isNaN() 函数用于检查其参数是否是非数字值; eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码; substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

<script>
export default {
  data() {
    return {
      value: "",
      open:true,
      numList: [
        {
          num: "1",
        },
        {
          num: "2",
        },
        {
          num: "3",
        },
        {
          symbol: "+",
        },
        {
          num: "4",
        },
        {
          num: "5",
        },
        {
          num: "6",
        },
        {
          symbol: "-",
        },
        {
          num: "7",
        },
        {
          num: "8",
        },
        {
          num: "9",
        },
        {
          symbol: "*",
        },
        {
          num: "0",
        },
        {
          num: "00",
        },
        {
          num: ".",
        },
        {
          symbol: "/",
        },
      ],
    };
  },

  computed: {
    result() {
      this.open=true
      let end = this.value.charAt(this.value.length - 1);
      try {
        if (!isNaN(end)) {
          return eval(this.value);
        }
      } catch (err) {
        this.$message.warning("计算有误，请重新输入");
      }
    },
  },

  methods: {
    enterValue(item) {
      if (item.num) {
        this.value = this.value + item.num;
      } else {
        this.value = this.value + item.symbol;
      }
    },

    delValue() {
      this.value = this.value.substr(0, this.value.length - 1);
    },

    clearValue() {
      this.value = "";
    },

    resultValue() {
      if (this.result) {
        // this.value = this.result.toString();
        this.open=false
      }
    },
  },
};

</script>

样式

<style lang="less" scoped>
li{list-style-type:none;}
.cou {
  width: 289px;
  margin: 0 auto;
  &-input {
    width: 100%;
    height: 80px;
    background: #F1F1F1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 14px 16px;
  border: none;
    &-value {
      width: 100%;
      background: #F1F1F1;
      text-align: right;
      color: #999999;
      font-size: 16px;
      border: none;
    }

    &-result {
      width: 100%;
      background: #F1F1F1;
      text-align: right;
      font-size: 30px;
      font-family: Impact;
      border: none;
    }
  }

  &-enter {
    margin-top: 14px;

    &-num {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        font-size: 18px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-bottom: 14px;
        cursor: pointer;

        div {
          width: 100%;
          height: 100%;
          border: 1px solid #DCDCDC;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }
      }
    }

    &-operate {
      display: flex;
      align-items: center;
      justify-content: space-between;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      li:nth-child(1) {
        width: 75px;
        height: 42px;
        background: #DADADA;
        border-radius: 30px;
        color: #666666;
        font-size: 14px;
      }

      li:nth-child(2) {
        width: 75px;
        height: 42px;
        background: #FF7575;
        border-radius: 30px;
        color: #FFF;
        font-size: 14px;
      }

      li:nth-child(3) {
        width: 90px;
        height: 42px;
        background: #3891FF;
        border-radius: 30px;
        color: #FFF;
        font-size: 33px;
      }
    }
  }
}

</style>