目标

模仿钱迹APP，numberPad上面可以实现加操作。

实现思路

第一次想法

用this.input存储上一个数字，配合input得到现在的数字，进行加操作

export default {
  data() {
    return {
      output: "0",
      input: 0,
      sum: 0,
    };
  },
  methods: {
    inputContent(event) {
      const input = event.target.textContent;
      // console.log(input);
      if (this.output.indexOf("+") > 0) {
        console.log("this.sum为" + this.sum, "this.input为" + this.input);
        this.sum = this.input + +input;
        this.input = this.sum;
        console.log("this.input为" + this.input, "this.sum为" + this.sum);
      }
      if (this.output.length === 16) {
        return;
      }
      if (this.output === "0") {
        if ("0123456789".indexOf(input) >= 0) {
          this.output = input;
        } else {
          this.output += input;
        }
        this.input = +input;
        return;
      }
      if (this.output.indexOf(".") >= 0) {
        //保证里面只有一个小数点
        if (input === ".") return;
        // 保证只输出小数点后两位
        if (this.output.length === this.output.indexOf(".") + 3) return;
      }
      this.input = +input;
      this.output += input;
    },

    remove() {
      if (this.output.length === 1) {
        this.output = "0";
      } else {
        this.output = this.output.slice(0, -1);
      }
    },

    clear() {
      this.output = "0";
    },

    ok() {
      console.log("提交账单");
      this.clear();
    },

    add(event) {
      const input = event.target.textContent;
      this.output += input;
    },
  },
};

可以得到相应结果

但是调试出现问题：若是出现两个加号连接起来，便无法得到正确结果，只会得到后两个数字相加的结果

由于事件inputContent(event) 逻辑不够清晰， this.input = +input需要在多个地方出现，会出现赋值之后被篡改结果的情况，无法打印出相应的结果

第二次想法

利用分割操作，得到加前面的字符串和加后面的字符串，转换为数字进行加操作

具体实施：利用.split("-")得到以减号分割的的字符串数组，利用.map((nums) => +nums)得到数字数组，利用.reduce( (previousValue, currentValue) => previousValue - currentValue)得到结果

    divider(event) {
      if (this.output.charAt(this.output.length - 1) === "-") {
        return;
      }
      const input = event.target.textContent;
      this.output += input;
      const number2 = this.output.split("-").map((nums) => +nums);
      console.log(number2);
      const divider = number2.reduce(
        (previousValue, currentValue) => previousValue - currentValue
      );
      console.log(divider);
    },

逻辑非常混乱，会在之前的代码中插入过多，不适合模块化以及未来优化，尝试新的方式

第三次想法

设计一个计算器，利用计算器逻辑操作。将代码推倒重来，使自己逻辑清晰。

export default {
  data() {
    return {
      currentNumber: "",
      prevNumber: "",
      sign: "",
    };
  },
  methods: {
    run(e) {
      const type = e.target.dataset.type;
      const text = e.target.textContent;

      if (type === "remove") {
        this.remove();
      } else if (type === "clear") {
        this.clear();
      } else if (type === "operate") {
        this.operate(text);
      } else if (type === "ok") {
        this.ok();
      } else {
        this.pushNumber(text);
      }
    },

    pushNumber(num) {
      if (this.currentNumber.length === 16) {
        return;
      }
      if (this.currentNumber === "0") {
        if ("0123456789".indexOf(num) >= 0) {
          this.currentNumber = num;
        } else {
          this.currentNumber += num;
        }
        return;
      }
      if (this.currentNumber.indexOf(".") >= 0) {
        //保证里面只有一个小数点
        if (num === ".") return;
        // 保证只输出小数点后两位
        if (this.currentNumber.length === this.currentNumber.indexOf(".") + 3)
          return;
      }

      this.currentNumber = this.currentNumber + num;
      console.log(this.currentNumber);
    },

    remove() {
      if (!this.currentNumber.toString().length) return;
      this.currentNumber = this.currentNumber.toString().slice(0, -1);
      console.log(this.currentNumber);
    },

    clear() {
      this.currentNumber = "0";
      this.sign = "";
      this.prevNumber = "";
    },

    operate(text) {
      if (!this.currentNumber.toString().length) return;
      this.sign = text.target.innerHTML;
      this.prevNumber = this.currentNumber;
      this.currentNumber = "";

      console.log(this.sign);
    },

    ok() {
      let result = 0;
      const prev = Number(this.prevNumber);
      const current = Number(this.currentNumber);
      switch (this.sign) {
        case "+":
          result = prev + current;
          break;
        case "-":
          result = prev - current;
          break;
        default:
          return;
      }
      this.currentNumber = result;
      this.sign = "";
      this.prevNumber = "";

      console.log("提交账单", this.currentNumber);
    },
  },

  components: { Notes },
};

可以实现计算器功能

但是不走计算器逻辑便无法提交

保存按钮直接失效了

继续想办法......

第四次尝试

不用type逻辑，将分类更改，代码调试后成功运行

export default {
  data() {
    return {
      currentNumber: "0",
      prevNumber: "0",
      sign: "",
      result: 0,
      input: "",
    };
  },
  methods: {
    run(e) {
      const text = e.target.textContent;
      this.pushNumber(text);
    },
    pushNumber(num) {
      if (this.currentNumber.length === 16) {
        return;
      }
      if (this.currentNumber === "0") {
        if ("0123456789".indexOf(num) >= 0) {
          this.currentNumber = num;
        } else {
          this.currentNumber += num;
        }
        this.input += num;

        return;
      }
      if (this.currentNumber.indexOf(".") >= 0) {
        //保证里面只有一个小数点
        if (num === ".") return;
        // 保证只输出小数点后两位
        if (this.currentNumber.length === this.currentNumber.indexOf(".") + 3)
          return;
      }
      this.input += num;
      console.log(99999, "this.input：" + this.input);
      this.currentNumber = this.currentNumber + num;
    },

    remove() {
      if (this.currentNumber.toString().length === 1) {
        this.currentNumber = "0";
        this.input = "";
        return;
      }
      this.currentNumber = this.currentNumber.toString().slice(0, -1);
      this.input = this.currentNumber;
    },

    clear() {
      this.currentNumber = "0";
      this.sign = "";
      this.prevNumber = "0";
      this.input = "";
    },

    operate(text) {
      if (!this.currentNumber.toString().length) return;
      this.sign = text.target.innerHTML;
      console.log(this.sign);
      this.prevNumber = this.currentNumber;
      this.currentNumber = "";

      this.input = this.input + this.sign;
      console.log(1111111, this.input);
      this.caculate();
    },

    ok() {
      this.result = 0;
      console.log(3333333);
      const prev = Number(this.prevNumber);
      const current = Number(this.currentNumber);
      switch (this.sign) {
        case "+":
          this.result = prev + current;
          break;
        case "-":
          this.result = prev - current;
          break;
        default:
      }
      this.currentNumber = this.result ? this.result : this.currentNumber;
      this.sign = "";
      this.prevNumber = "0";

      console.log("提交账单", this.currentNumber);
      this.currentNumber = "0";
      this.input = "";
    },
  },

  components: { Notes },
};

但是发现：无法实现连加或者连减操作

继续想办法......

第五次尝试

新增全局变量input，记录所有字符串，利用字符串分割进行计算

遇到问题：将字符串'11.9+6-0.9'变成['11.9','+','6','-','0.9']，不会啊.....

求助之后得解：str.split(/([+-])/g)

export default {
  data() {
    return {
      currentNumber: "0",
      prevNumber: "0",
      sign: "",
      result: 0,
      input: "",
    };
  },
  methods: {
    run(e) {
      const text = e.target.textContent;
      this.pushNumber(text);
    },

    caculate() {
      //  str.split(/([+-])/g) 将字符串'11.9+6-0.9'变成['11.9','+','6','-','0.9']
      const arr = this.input.split(/([+-])/g);
      arr.forEach((item, index) => {
        if (item === "+" && index !== 0) {
          arr[index + 1] = Number(arr[index - 1]) + Number(arr[index + 1]);
          this.result = arr[index + 1].toFixed(2);
        }
        if (item === "-" && index !== 0) {
          arr[index + 1] = Number(arr[index - 1]) - Number(arr[index + 1]);
          this.result = arr[index + 1].toFixed(2);
        }
      });
    },

    pushNumber(num) {
      if (this.currentNumber.length === 16) {
        return;
      }
      if (this.currentNumber === "0") {
        if ("0123456789".indexOf(num) >= 0) {
          this.currentNumber = num;
        } else {
          this.currentNumber += num;
        }
        this.input += num;

        return;
      }
      if (this.currentNumber.indexOf(".") >= 0) {
        //保证里面只有一个小数点
        if (num === ".") return;
        // 保证只输出小数点后两位
        if (this.currentNumber.length === this.currentNumber.indexOf(".") + 3)
          return;
      }
      this.input += num;
      this.caculate();

      this.currentNumber = this.currentNumber + num;
    },

    remove() {
      if (this.currentNumber.toString().length === 1) {
        this.currentNumber = "0";
        this.input = "";
        return;
      }
      this.currentNumber = this.currentNumber.toString().slice(0, -1);
      this.input = this.currentNumber;
    },

    clear() {
      this.currentNumber = "0";
      this.sign = "";
      this.prevNumber = "0";
      this.input = "";
    },

    operate(text) {
      if (!this.currentNumber.toString().length) return;
      this.sign = text.target.innerHTML;
      this.prevNumber = this.currentNumber;
      this.currentNumber = "";

      this.input = this.input + this.sign;
      this.caculate();
    },

    ok() {
      this.currentNumber = this.result ? this.result : this.currentNumber;
      this.sign = "";
      this.prevNumber = "0";

      console.log("提交账单", this.currentNumber);
      this.currentNumber = "0";
      this.input = "";
      this.result = 0;
    },
  },

  components: { Notes },
};

终终终终终终于做好了。。。。。。太不容易了

总结

1. 一定要有自己的思路，不然很容易思路混乱，我一开始甚至到中间的时候都没有自己的代码实现思路，只是有想法，然后各种找资料去做，但是很容易被不同的代码逻辑搞混乱，想改都要花很长时间改，甚至找不到该怎么改，只能推倒重来。最后两次有了自己的思路之后就目标明确了很多。
2. console.log 调试真的很好用！！！