vue实现简易计算器

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .item {
            cursor: pointer;
        }
        .item:hover {
            background: #ddd
        }
        .container_box {
            display: grid;
            grid-template-rows: 60px 60px 60px;
            grid-template-columns: 60px 60px 60px;
            float: left;
        }
        .container_box .item {
            font-size: 24px;
            text-align: center;
            border: 1px solid #000;
            line-height: 60px;
            color: #333;
        }
        .btns {
            display: grid;
            grid-template-rows: 60px 60px 60px;
        }
        .btns .item {
            font-size: 24px;
            text-align: center;
            border: 1px solid #000;
            line-height: 60px;
            color: #333;
            width: 60px
        }
        .res {
            width: 116px;
            height: 30px;
            border: 1px solid #000;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            cursor: pointer;
            display: inline-block;
            margin-top: 5px;
        }
        .res:hover {
            background: #ddd
        }
        .sign {
            margin-top: 20px;
            font-size: 28px;
            font-weight: bold;
            padding: 15px;
            color: rgb(0, 119, 167);
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="container_box" @click="getValue">
            <div class="item ">7</div>
            <div class="item ">8</div>
            <div class="item ">9</div>
            <div class="item ">4</div>
            <div class="item ">5</div>
            <div class="item ">6</div>
            <div class="item ">1</div>
            <div class="item ">2</div>
            <div class="item ">3</div>
            <div class="item ">0</div>
            <div class="item " style="width:120px">.</div>
        </div>
        <div class="btns" @click="getSign">
            <div class="item ">+</div>
            <div class="item ">-</div>
            <div class="item ">*</div>
            <div class="item ">/</div>
        </div>
        <div class="res" @click="init">重置</div>
        <div class="res" @click="getRes">计算</div>
        <div class="sign">
            <span>{{num1}}</span>
            <span>{{sign}}</span>
            <span>{{num2}}</span>
            <span>{{equal}}</span>
            <span>{{res}}</span>
        </div>
    </div>
    <script src="demo.js"></script>
</body>
</html>

js

var vm = new Vue({
  el: ".app",
  data: {
    num1: "",
    num2: "",
    sign: "",
    res: "",
    flag: true,
    equal: "",
  },
  methods: {
    //获取数字
    getValue(e) {
      if (this.flag == true) {
        this.num1 += e.target.innerText;
      }
      if (this.flag == false) {
        this.num2 += e.target.innerText;
      }
    },
    //获取运算符
    getSign(e) {
      this.flag = false;
      this.sign = e.target.innerText;
    },
    //计算
    getRes() {
      this.equal = "=";
      switch (this.sign) {
        case "+":
          this.res = this.num1 * 1 + this.num2 * 1;
          break;
        case "-":
          this.res = this.num1 - this.num2;
          break;
        case "*":
          this.res = this.num1 * this.num2;
          break;
        case "/":
          this.res = this.num1 / this.num2;
          break;
        default:
          this.res = "未识别的运算符";
          break;
      }
    },
    init() {
      this.flag = true;
      this.num1 = "";
      this.num2 = "";
      this.sign = "";
      this.res = "";
      this.equal = "";
    },
  },
});

效果

相关文章