Vue——简易计算器

界面效果：

创建Vue项目参考https://www.runoob.com/vue3/vue3-install.html
创建好的项目目录：

界面与布局
Calculator.vue组件的界面与布局：

<template>
  <div class="calculator">
    <div class="display">{{current || '0'}}</div>
    <div class="btn" @click="clear()">C</div>
    <div class="btn" @click="sign()">+/-</div>
    <div class="btn" @click="percent()">%</div>
    <div class="btn operator" @click="divide()">÷</div>
    <div class="btn" @click="append(7)">7</div>
    <div class="btn" @click="append(8)">8</div>
    <div class="btn" @click="append(9)">9</div>
    <div class="btn operator"@click="times">x</div>
    <div class="btn"@click="append(4)">4</div>
    <div class="btn"@click="append(5)">5</div>
    <div class="btn"@click="append(6)">6</div>
    <div class="btn operator">−</div>
    <div class="btn"@click="append(3)">3</div>
    <div class="btn"@click="append(2)">2</div>
    <div class="btn" @click="append(1)">1</div>
    <div class="btn operator"@click="add()">+</div>
    <div class="btn zero" @click="append(0)">0</div>
    <div class="btn" @click="dot()">.</div>
    <div class="btn operator" @click="equal()">=</div>
  </div>
</template>
<script>
export default {
  name: 'Calculator',
  data () {
    return {
      current: ''
    }
  }
}
</script>

<style scoped>
  .calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* fr 单位是一个自适应单位*/
    grid-auto-rows: minmax(50px, auto); /*创建的行高度的最小值50px，最大值与最大内容一致*/
    margin: auto;
    width: 400px;
    font-size: 40px;
  }
  .display {
    grid-column: 1 / 5; /*左边框在第1根垂直线，右边框在第5根垂直线*/
    background: #333;
    color: white;
  }
  .zero {
    grid-column: 1 / 3; /*左边框在第1根垂直线，右边框在第3根垂直线*/
  }
  .btn {
    border: 1px solid #999;
    background: #F2F2F2;
  }
  .operator {
    background-color: orange;
    color: white;
  }
</style>

13.2 处理脚本

<script>
export default {
  name: 'Calculator',
  data () {
    return {
      previous: null,        // 前一个操作数
      current: '',             // 当前操作数
      operator: null,          // 运算函数
      operatorClicked: false  // 是否点击了操作符
    }
  },
  methods: {
    clear() { // 清理显示
      this.current = ''
    },
    sign() { // 设置正负号
      this.current = this.current.charAt(0) === '-' ? this.current.slice(1) : `-${this.current}`
    },
    percent() { // 百分比
      this.current = `${parseFloat(this.current) / 100}`
    },
    append(number) { // 数字操作
      if (this.operatorClicked) { //当已点击过操作符时将前次输入的数清空
        this.current = ''
        this.operatorClicked = false
      }
      this.current = `${this.current}${number}`
    },
    dot() { // 点号操作
      if (this.current.indexOf('.') === -1) {
        this.append('.')
      }
    },
    setPrevious() {
      this.previous = this.current
      this.operatorClicked = true
    },
    divide() { // 除法
      // 创建一函数对象
      this.operator = (a,b) => a / b;
      this.setPrevious();
    },
    times() { // 乘法
      this.operator = (a,b) => a * b;
      this.setPrevious();
    },
    minus() { // 减法
      this.operator = (a,b) => a - b;
      this.setPrevious();
    },
    add() { // 加法
      this.operator = (a,b) => a + b;
      this.setPrevious()
    },
    equal() { // 等号计算结果
// 执行计算，+号为快速转换成数值类型
      this.current = `${this.operator(+this.previous, +this.current)}`
      this.previous = null
    }
  }
}
</script>