vue2版的计算器

这是一个vu2版的计算器，至于为什么会写计算器，还是因为我室友用js实现的计算器，在我面前嘚瑟，还说我用一天都写不出来，然后我花了两节课，就基本写出来了，然后又花了几个小时完善了一下。我css学的一般，所以样式比较丑，我室友写的就比我好看多了。完整代码在最下面

项目效果

项目的实现

css

• 按钮区域用的是弹性布局，听我室友说用网格布局更简单一点
• 但是我基本没有用过，看样子以后得学一下。

html

• 用的都是一些简单的div，然后用的是v-for指令遍历出来的结构
• 0的按钮比较大一点，就用了动态class
• 我加了一个记录功能，用一个变量来控制记录区域的显示与隐藏，因为要频繁点击，就用了v-show

script

 按钮的点击事件，要区分先后顺序，下面只列出几个重要点

1. 判断点下的按钮是不是数字

 if (Number(item) || Number(item) === 0) {
        if (this.value.slice(0, 2) === '0' && item === 0) return
        // 防止'000+5'的出现
        this.value += item
  }

• Number(item) 判断的是数字，if判断条件即真就执行，但是要注意0
• 定义的输入框变量是空字符串，所有会进行字符串拼接

2. 回退的实现

if (item === '回退') {
    this.value = this.value.slice(0, this.value.length - 1)
  }

• 每次点击，就截取字符串的长度减1的数值，例：'78+99' => '78+9'

3. 加减乘除的实现

const symbolArr = ['+', '-', '×', '÷&#