Javascript 字符串不会附加到屏幕上

我试着做一个计算器。我使用vue.js使其工作。下次单击计算器按钮时，第二个字符串值不会附加到计算器屏幕上。问题发生在我在方法部分编写了一些算术运算逻辑之后。 我的英语很差

这是我在组件中的代码“calculator.vue”

<template>
  <div class="calculator">
    <div class="display">{{current || '0'}}</div>
    <div class="btn" @click="clear">AC</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" @click="minus">-</div>
    <div class="btn" @click="append('1')">1</div>
    <div class="btn" @click="append('2')">2</div>
    <div class="btn" @click="append('3')">3</div>
    <div class="btn operator" @click="plus">+</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 {
  data() {
    return {
      current: "",
      previous: null,
      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) {
      this.current = `${this.current}${number}`;
    },
    dot() {
      if (this.current.indexOf(".") === -1) {
        this.append(".");
      }
    },
    setPrevious() {
      this.previous = this.current;
      this.operatorClicked = false;
    },
    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();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.calculator {
  font-size: 30px;
  width: 300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
}
.display {
  grid-column: 1/5;
  background-color: #333;
  color: white;
}
.zero {
  grid-column: 1/3;
}
.btn {
  background-color: #f2f2f2;
  border: 1px solid #999;
  cursor: pointer;
}
.operator {
  color: white;
  background-color: orange;
}
</style>

{{当前| |'0'}
自动控制
+/-
%
/
7.
8.
9
x
4.
5.
6.
-
1.
2.
3.
+
0
.
=
导出默认值{
数据（）{
返回{
电流：“，
上一个：空，
运算符：空，
操作员点击：错误，
};
},
方法：{
清除（）{
此项。当前=”；
},
符号（）{
这是目前的情况=
此.current.charAt（0）=“-”
？该电流片（1）
：`-${this.current}`；
},
百分比（）{
this.current=`${parseFloat（this.current）/100}`；
},
追加（数字）{
this.current=`${this.current}${number}`；
},
点（）{
if（this.current.indexOf（“.”）=-1）{
本条。附加（“.”）；
}
},
setPrevious（）{
this.previous=this.current；
this.operatorClicked=false；
},
除名{
这个操作符=（a，b）=>a/b；
this.setPrevious（）；
},
泰晤士报（）{
这个操作符=（a，b）=>a*b；
this.setPrevious（）；
},
减（）{
这个操作符=（a，b）=>a-b；
this.setPrevious（）；
},
添加（）{
这个操作符=（a，b）=>a+b；
this.setPrevious（）；
},
},
};
.计算器{
字体大小：30px；
宽度：300px；
保证金：0自动；
显示：网格；
网格模板列：重复（4，1fr）；
网格自动行：最小最大值（50px，自动）；
}
.展示{
网格柱：1/5；
背景色：#333；
颜色：白色；
}
.零{
网格柱：1/3；
}
.btn{
背景色：#F2F2；
边框：1px实心#999；
光标：指针；
}
.接线员{
颜色：白色；
背景颜色：橙色；
}

我将您的代码放在codepen中，它工作正常。唯一缺少的是模板中缺少的两个未定义的方法。当我添加这些时，它按预期工作

代码笔URL-

---

添加

plus（）

和

equal（）

方法，并尝试是否可行。

在您的append函数中，如果您执行此

${this.current}{number}

而不是此

${this.current}${number}

oh nevermind。。。。。我看错了，我不确定你在问什么问题。检查控制台是否有错误。

add

和

plus

的名称不匹配。您没有名为

equal

的方法。我假设

setPrevious

也应该清除

current

。