vue中计算器

以下是一个基于 Vue 的简单计算器示例：

HTML:

<div id="app">
  <div class="calculator">
    <div class="display">{{ display }}</div>
    <div class="buttons">
      <button @click="addToDisplay('7')">7</button>
      <button @click="addToDisplay('8')">8</button>
      <button @click="addToDisplay('9')">9</button>
      <button @click="addToDisplay('/')">÷</button>
      <button @click="addToDisplay('4')">4</button>
      <button @click="addToDisplay('5')">5</button>
      <button @click="addToDisplay('6')">6</button>
      <button @click="addToDisplay('*')">x</button>
      <button @click="addToDisplay('1')">1</button>
      <button @click="addToDisplay('2')">2</button>
      <button @click="addToDisplay('3')">3</button>
      <button @click="addToDisplay('-')">-</button>
      <button @click="addToDisplay('0')">0</button>
      <button @click="addToDisplay('.')">.</button>
      <button @click="calculate()">=</button>
      <button @click="addToDisplay('+')">+</button>
      <button @click="clearDisplay()">C</button>
    </div>
  </div>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    display: '',
  },
  methods: {
    addToDisplay(value) {
      this.display += value;
    },
    clearDisplay() {
      this.display = '';
    },
    calculate() {
      try {
        this.display = eval(this.display);
      } catch (e) {
        if (e instanceof SyntaxError) {
          this.display = 'Error';
        }
      }
    },
  },
});

CSS:

.calculator {
  border: 1px solid black;
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

.display {
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
  margin-bottom: 10px;
}

.buttons button {
  width: 40px;
  height: 40px;
  margin: 5px;
  font-size: 20px;
  border-radius: 50%;
  background-color: #eee;
  border: none;
  outline: none;
}

.buttons button:hover {
  background-color: #ccc;
  cursor: pointer;
}

在这个示例中，我们使用 `addToDisplay` 方法将按钮的值添加到显示器中。`clearDisplay` 方法用于清除显示器中的内容。`calculate` 方法使用 JavaScript 的 `eval` 函数来计算显示器中的表达式，并在需要时处理语法错误。最后，在 HTML 中，我们使用了 `@click` 指令来绑定按钮点击事件到相应的方法上。