用vue写一个计算器程序

这里是一个简单的计算器示例，使用Vue.js框架编写，包括基本的加减乘除操作：

<template>
  <div id="calculator">
    <div class="display">{{ display }}</div>
    <div class="buttons">
      <div class="row">
        <button class="number" @click="append('7')">7</button>
        <button class="number" @click="append('8')">8</button>
        <button class="number" @click="append('9')">9</button>
        <button class="operator" @click="operator('/')">÷</button>
      </div>
      <div class="row">
        <button class="number" @click="append('4')">4</button>
        <button class="number" @click="append('5')">5</button>
        <button class="number" @click="append('6')">6</button>
        <button class="operator" @click="operator('*')">×</button>
      </div>
      <div class="row">
        <button class="number" @click="append('1')">1</button>
        <button class="number" @click="append('2')">2</button>
        <button class="number" @click="append('3')">3</button>
        <button class="operator" @click="operator('-')">-</button>
      </div>
      <div class="row">
        <button class="number" @click="append('0')">0</button>
        <button class="operator" @click="decimal()">.</button>
        <button class="operator" @click="operator('+')">+</button>
        <button class="equal" @click="calculate()">=</button>
      </div>
      <div class="row">
        <button class="clear" @click="clear()">C</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: '0',
      operator: null,
      operand1: null,
      operand2: null,
      result: null,
      decimal: false
    };
  },
  methods: {
    append(value) {
      if (this.display === '0') {
        this.display = value;
      } else {
        this.display += value;
      }
    },
    operator(op) {
      this.operator = op;
      this.operand1 = parseFloat(this.display);
      this.display = '0';
      this.decimal = false;
    },
    decimal() {
      if (!this.decimal) {
        this.display += '.';
        this.decimal = true;
      }
    },
    calculate() {
      this.operand2 = parseFloat(this.display);
      switch (this.operator) {
        case '+':
          this.result = this.operand1 + this.operand2;
          break;
        case '-':
          this.result = this.operand1 - this.operand2;
          break;
        case '*':
          this.result = this.operand1 * this.operand2;
          break;
        case '/':
          this.result = this.operand1 / this.operand2;
          break;
        default:
          break;
      }
      this.display = this.result.toString();
    },
    clear() {
      this.display = '0';
      this.operator = null;
      this.operand1 = null;
      this.operand2 = null;
      this.result = null;
      this.decimal = false;
    }
  }
};
</script>

<style>
#calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.display {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 48px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 0 20px;
}

.buttons {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

button {
  flex: 1;
  height: 60px;
  font-size: 24px;
  border: none;
  background-color: #fff;
  cursor: pointer;
}

button:hover {
  background-color: #e0e0e0;
}

.number {
  color: #333;
}

.operator {
  color: #fff;
  background-color: #f44336;
}

.equal {
  color: #fff;
  background-color: #4caf50;
}

.clear {
  color: #fff;
  background-color: #2196f3;
  font-size: 18px;
  height: 40px;
  margin: 10px;
}
</style>

在这个示例中，我们使用data属性来存储当前的显示值、操作符、操作数和结果，以及一个标志来表示小数点是否已经输入。我们使用methods属性来定义处理用户输入的方法，例如append方法将数字添加到当前显示值中，operator方法将操作符保存在状态中，并将当前显示值转换为一个操作数，等等。最后，我们使用简单的HTML和CSS来呈现计算器的UI