我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

这是一个vu2版的简易计算器，至于为什么会写计算器，还是因为我室友用js实现的计算器，在我面前嘚瑟，还说我用一天都写不出来，然后我花了两节课，就基本写出来了，然后又花了几个小时完善了一下。

下面就是实现的简易计算器

我css学的一般，所以样式比较丑，我室友写的就比我好看多了

项目的实现

css

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

html

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

script

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

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

 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
定义的输入框变量是空字符串，所有会进行字符串拼接

回退的实现

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

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

加减乘除的实现

const symbolArr = ['+', '-', '×', '÷']
_symbol (item, symbolArr) {
  const endSymbol = this.value.slice(-1) // 判断最后一位是否是运算符
  if (symbolArr.includes(endSymbol)) return
  this.value = this.value + item
}

由于加减乘除的逻辑代码基本一致，所以就写了一个方法

等号的实现

if (item === '=') {
    const endSymbol = this.value.slice(-1)
    if (symbolArr.includes(endSymbol)) return // 判断最后一位是否是加减乘除
    this.value = this.value.replace(/÷/g, '/')
    this.value = this.value.replace(/×/g, '*')
    const strOrigin = this.value
    this.value = eval(this.value) // 此时变量是数字类型

    const str = strOrigin + '=' + this.value // 将记录进行本地存储
    this.historyArr.unshift(str)
    localStorage.setItem('计算器记录', JSON.stringify(this.historyArr))
  }

由于我们平常用的乘除，跟计算机中的不一致，所以要进行正则替换，g代表全局匹配
要注意eval(this.value)是将字符串里面的代码识别成js表达式进行执行，结果是数字类型

在项目遇到的难点

eval()这个方法我当时真不知道有这个作用，我只在正则时用过，还是将将变量进行解析，而不需要用new RegExp(变量)，这要不是问我室友，我还真写不出来

项目中的bug

当输入的字符串长度过大时，不会自动向左，还要用手滑动如下所示

计算器代码.gif

如果有人愿意指点时，请在评论区指出，小编感激不尽

总结

写文章是很有用的，如果不是这次写了文章，我都不知道自己的计算器还有几个小bug

vue2版本炫酷计算器